vue+Ant design使用a-table

vue+Ant design使用a-table

今天遇到一个需求是 组件中有多个a-table(v-for循环出的),但是多个a-table的选项,只能选择一个

<a-table 
    :columns="columns" 
    :data-source="dataSource" 
    rowKey="UUID"
    :pagination="false" 
    :rowSelection="{selectedRowKeys:selectedRowKeysArray,onChange:onSelectChange,type:'radio',getCheckboxProps:getCheckboxProps}"
>
        <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
</a-table>

columns:表头数据
data-source:行数据
rowSelection:选择功能的重要属性,selectedRowKeysArray是选择的UUID
onSelectChange:选项发生变化触发
rowKey:唯一标识,UUID是dataSource中的属性
getCheckboxProps:禁选的行

<script>
const columns=[
  {
    title: '类型',
    dataIndex: 'objectType',
    key: 'objectType',
    // width: 80,
    align:"center",
    // scopedSlots: { customRender: 'name' },
  },
]
data(){
	return{
		columns,
		dataSource:[],
		selectedRowKeysArray:[],
	}
},
methods:{
	//选项发生变化时触发
   onSelectChange(selectedRowKeys,selectedRows){
   		//selectedRowKeys是选中的UUID
   		//selectedRows选择的当前行的数据
    	// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    	this.selectedRowKeysArray=selectedRowKeys
   },
   //选项禁用
   getCheckboxProps(record){
     //record就是你每一行的数据是对象
     console.log(record,"_____-getCheckboxProps-----");
     return ({
        props: {
          disabled: record.objectType === '3', // 禁用规则
          name: record.name,
        }
     })
   },
},
</script>

这样就实现了 在多个a-table中只选一项

在这里在记录下 a-table常见用法

<a-table 
    :columns="columns" 
    :data-source="dataSource" 
    rowKey="UUID"
    :pagination="false" 
    :rowSelection="rowSelection"
>
        <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
</a-table>

computed:{
    rowSelection() {
      return {
        type:"radio",
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.type === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
 },