需求:
1.table表格有多条数据,需要实现表格选中/取消选中的功能
2.选中表格时每次只能选其中的一条数据
html部分
<template>
<div>
<a-table :columns="columns" :data-source="data">
<span slot="action" slot-scope="text, record">
<a-checkbox @change="onChange(record)" :checked="record.checked"></a-checkbox>
</span>
<div slot="planInfo" slot-scope="text">{{ text }}</div>
</a-table>
</div>
</template>
js部分
<script>
data() {
return {
columns: [
{
title: '操作',
dataIndex: 'action',
align: 'center',
width: 120,
scopedSlots: { customRender: 'action' }
},
{
title: ' 计划信息',
dataIndex: 'planInfo',
scopedSlots: { customRender: 'info' }
}
],
// table表格中的数据
data: [
{
key: '1',
checked: false,
planInfo: 'table第一行'
},
{
key: '2',
checked: true,
planInfo: 'table第二行'
},
{
key: '3',
checked: false,
planInfo: 'table第三行'
}
]
},
methods: {
// table表格中的复选框
onChange(record) {
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].key !== record.key) {
this.data[i].checked = false
}
}
record.checked = !record.checked
}
}
}
</script>
最终效果如图: