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:sel
·
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,
},
}),
};
},
},
更多推荐
已为社区贡献8条内容
所有评论(0)