vue3的table表格和el-radio如何根据条件禁用某一行

在Vue3中，如果你想要基于某种条件禁用表格（通常通过`v-for`循环渲染`<tr>`元素）中的某一行，并且同时结合Element UI的`el-radio`组件，可以这样做：

首先，在数据中定义一个数组，每个对象包含需要展示的数据以及一个布尔值来表示是否禁用，例如：

data() {
  return {
    items: [
      { name: 'Item 1', disabled: false },
      { name: 'Item 2', disabled: true }, // 这行会被禁用
      { name: 'Item 3', disabled: false }
    ]
  };
}

然后，在模板中使用v-bind:class或v-if来控制`<tr>`的显示状态：

<table>
  <tr v-for="(item, index) in items" :key="index">
    <td>{{ item.name }}</td>
    <!-- 使用el-radio -->
    <el-radio v-model="selectedItem" :disabled="item.disabled" @change="onRadioChange(index)">
      {{ item.name }}
    </el-radio>
  </tr>
</table>

<!-- 可能需要一个额外的变量来跟踪当前选中的radio，这里是selectedItem的例子 -->
<script setup>
import { ref } from 'vue';

const selectedItem = ref(null);

// 当选择某个radio时改变对应的item.disabled
function onRadioChange(index) {
  if (selectedItem.value === null) {
    // 如果没有已选中的项，则默认禁用当前行
    items[index].disabled = true;
  } else {
    // 否则解禁用当前行
    items[index].disabled = false;
  }
}
</script>

在这个例子中，当用户点击非禁用状态的`el-radio`时，会触发`onRadioChange`函数，更新对应行的`disabled`属性。如果`selectedItem`没有被设置，那么当前行会被禁用。