iview Table 复选框部分禁选

在iView Table组件中，如果你想让表格的复选框部分允许用户选择某些行，但有一些特定的行默认是禁选状态，你可以通过设置`row-class-name`属性和自定义CSS类来实现。`row-class-name`是一个函数，它接收当前行的数据作为参数，返回一个CSS类名。

例如：

<Table :data="tableData" row-class-name="customRowClassName">
  <TableHeader slot-scope="{ $index, column }">
    <!-- 表头 -->
  </TableHeader>
  <TableBody>
    <TableColumn v-for="(column, index) in columns" :key="index">
      <template slot="cell" slot-scope="scope">
        <!-- 根据需要显示复选框或其他内容 -->
        <Checkbox v-model="scope.$index === selectedRows.indexOf(rowKey)" @input="toggleSelection(scope.row.key)">
          <!-- 这里的rowKey是你数据中的唯一标识符 -->
        </Checkbox>
      </template>
    </TableColumn>
  </TableBody>
</Table>

<script>
export default {
  data() {
    return {
      tableData,
      selectedRows: [], // 初始未选中的数组
      columns: [
        { type: 'selection', width: 60 }, // 添加复选框列
        ... // 其他列
      ]
    };
  },
  methods: {
    toggleSelection(rowKey) {
      if (this.isBlocked(rowKey)) {
        return; // 如果是禁止的行，则忽略操作
      }
      this.selectedRows.includes(rowKey) ? this.selectedRows.splice(this.selectedRows.indexOf(rowKey), 1) : this.selectedRows.push(rowKey);
    },
    isBlocked(rowData) {
      // 在这里检查rowData，如果满足条件则返回true表示禁选
      if (/* 检查条件 */) {
        return true;
      }
      return false;
    }
  }
};
</script>

<style scoped>
.customRowClassName({ row }) {
  if (this.isBlocked(row.data)) {
    return 'custom-row-disabled'; // 自定义禁选的CSS类名
  }
  return '';
}
</style>

在这个例子中，`isBlocked`方法用于判断某个行是否应该禁选，如果是，则返回`true`，否则返回`false`。然后在`.custom-row-disabled`这个CSS类中定义样式，比如设置背景颜色或添加不可交互效果。