vue2 antv table 可选行单选，并设置不可点击样式

示例图

template

<a-table 
:columns="columns" 
:dataSource="data" 
:row-class-name="rowClassName" 
:rowKey="record => record.id" 
>
  <template slot="name" slot-scope="text,record,index">
    <a-checkbox  
    @click="changeTrChecked(index)" 
    :checked="record.isChecked" 
    :disabled="isRowDisabled(record.isDisabled)" />
    {{ text }}
  </template>
</a-table>

data

columns: [
  {
    title: '表头1',
    dataIndex: 'th1',
    width: 80,
    ellipsis: true,
    minWidth: 80,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '表头2',
    dataIndex: 'th2',
    width: 80,
    minWidth: 80,
    ellipsis: true
  },
],
data: [{
  id: '100000001',
  th1: '表格1',
  th2: '表格2',
  isChecked: false,
  isDisabled: true,
}, {
  id: '100000002',
  th1: '表格1',
  th2: '表格2',
  isChecked: false,
  isDisabled: false,
},],

method

  methods: {
    // 表格单选
    changeTrChecked(index) {
      this.data = this.data.map((item, i) => {
        if (i === index) {
          return { ...item, isChecked: true };
        }
        return { ...item, isChecked: false }
      });
    },

    // 表格禁用行样式
    rowClassName(record) {
      // 如果isDisabled true，返回特定的类名
      return record.isDisabled ? 'disable-row' : '';
    },

    // 表格行是否禁用
    isRowDisabled(isDisabled) {
      // 根据需要判断哪些行需要禁用
      return isDisabled;
    },
  }

css

.disable-row {
    color: #999;
}