ant design vue 表格单选 选中后其他不可选 接口返回数据
时间: 2023-10-24 10:06:00 浏览: 102
txt文件上传ant design vue表格以及对表格文件的分列,预览行数等联动效果
要实现表格单选,可以使用 `type="radio"` 属性,然后在选中某一行时,遍历整个表格,将其他行的选中状态都设为 false。
下面是一个示例代码:
```vue
<template>
<a-table :columns="columns" :dataSource="dataSource">
<template slot="name" slot-scope="{text, record}">
<span v-if="!record.disabled">{{ text }}</span>
<span v-else style="color: gray">{{ text }}</span>
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
],
dataSource: [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
disabled: true, // 表示不可选状态
},
],
selectedRowKeys: [], // 当前选中的行
};
},
methods: {
handleRowClick(record) { // 点击行时触发
if (record.disabled) {
return; // 如果当前行不可选,直接返回
}
const { selectedRowKeys } = this;
const index = selectedRowKeys.indexOf(record.key);
if (index > -1) {
selectedRowKeys.splice(index, 1); // 如果当前行已经选中,则取消选中
} else {
selectedRowKeys.splice(0, selectedRowKeys.length, record.key); // 否则将当前行设为选中
}
this.dataSource.forEach((item) => {
if (item.key !== record.key) {
item.disabled = true; // 将其他行的状态设为不可选
} else {
item.disabled = false;
}
});
},
},
};
</script>
```
这里假设接口返回的数据都是一些基本的表格数据,没有特殊的要求。如果需要更复杂的操作,可以根据实际情况进行调整。
阅读全文