这里面是没有key,导致无法点击勾选
<template>
<a-table
:rowKey="
(record, index) => {
return index;
}
"
:columns="columns"
:data-source="data"
:expandIconColumnIndex="-1"
:defaultExpandAllRows="true"
:expandIconAsCell="false"
:pagination="false"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
>
<div slot="action" slot-scope="text, record">
{{ record.name }}
</div>
<div slot="age" slot-scope="text, record">
{{ record.age }}
</div>
<div slot="Address" slot-scope="text, record">
{{ reacord.Address }}
</div>
<div slot="description" slot-scope="text, record">
{{ record.description }}
</div>
<p slot="expandedRowRender" slot-scope="record" style="margin: 0">
<ul>
<li>{{record.John}}</li>
<li>{{record.Reese}}</li>
<li>{{record.Cathy}}</li>
<li>{{record.ZhaoSix}}</li>
</ul>
</p>
</a-table>
</template>
<script>
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
scopedSlots: { customRender: "name" },
},
{
title: "Age",
dataIndex: "age",
key: "age",
scopedSlots: { customRender: "age" },
},
{
title: "Address",
dataIndex: "address",
key: "address",
scopedSlots: { customRender: "address" },
},
{
title: "Action",
dataIndex: "description",
key: "description",
scopedSlots: { customRender: "description" },
},
];
const data = [
{
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
John: "张三",
Reese: "李四",
Cathy: "王五",
ZhaoSix: "赵六",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
},
{
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
John: "张三",
Reese: "李四",
Cathy: "王五",
ZhaoSix: "赵六",
description:
"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
},
{
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
John: "张三",
Reese: "李四",
Cathy: "王五",
ZhaoSix: "赵六",
description:
"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.",
},
];
export default {
data() {
return {
data,
columns,
selectedRowKeys: [],
};
},
created() {
},
methods: {
onSelectChange(selectedRowKeys, selectedRows) {
console.log(selectedRowKeys, "11", selectedRows, ">>");
this.selectedRowKeys = selectedRowKeys;
},
},
};
</script>
<style scoped>
ul {
display: flex;
list-style: none;
}
li {
width: calc(100% / 4);
}
</style>
可以值push一个key![]()
当嵌套表格频繁点击导致dom加载不出来,就可以用下面代码
<a-table
:expandedRowKeys="
this.data.map((item) => item.key)
"
:columns="columns"
:data-source="data"
:expandIconColumnIndex="-1"
:defaultExpandAllRows="true"
:expandIconAsCell="false"
:pagination="false"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
></a-table>