需求： 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>最终效果如图：
