想要使用表格的复选框列并控制复选框是否可选,先上代码如下
javascript
html部分
<a-table :rowKey="(record,index)=>{return record.id?record.id: index}"
:columns="columns" :data-source="tableData"
:row-selection="showSelection?rowSelection: null"
:pagination="pagination">
<template slot="isWarn" slot-scope="text">
<span style="color: #D9001B;">{{ text==='1'?'预警': '未预警' }}</span>
</template>
</a-table>
js部分
data() {
return {
showSelection: true,
pagination: {
total: 0,
pageSize: 10, // 每页中显示10条数据
showSizeChanger: true,
showQuickJumper: true,
current: 1,
pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
// showTotal: (total) => `共有 ${total} 条数据`, // 分页中显示总的数据 this.$t('COMMON.INTER_TOTAL', { total }), //
// showTotal: (total, range) => `共 ${total} 条记录,第${this.pagination.current}`,
onChange: (pageNumber) => {
this.pagination.current = pageNumber;
this.getOrderListFn();
},
onShowSizeChange: (current, pageSize) => {
this.pagination.pageSize = pageSize;
this.pagination.current = 1;
this.getOrderListFn();
}
},
columns: [
{
title: '是否预警',
dataIndex: 'isWarn',
key: 'isWarn',
scopedSlots: { customRender: 'isWarn' }
},
{
title: '状态',
dataIndex: 'checkState',
key: 'checkState'
}
],
tableData: [
{
id: 1,
checkState: null,
isWarn: '1'
},
{
id: 2,
checkState: 1,
isWarn: '0'
},
{
id: 3,
checkState: null,
isWarn: '2'
}
],
}
},
computed: {
rowSelection() {
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.selectedRowKeys = selectedRowKeys;
},
getCheckboxProps: (record) => ({
props: {
disabled: !record.checkState, // 禁选的条件
}
}),
selectedRowKeys: this.selectedRowKeys,// 可以通过给this.selectedRowKeys赋值来设置默认选中项,注意,如果有禁选条件,赋值时要把禁选的给剔除掉
// onSelectAll: (selected, selectedRows) => {
// // 重置全选状态,确保禁用的复选框不会被选中
// const newSelectedRows = selectedRows.filter(row => !row.checkState||!row.sendState);
// console.log('newSelectedRows', newSelectedRows);
// return newSelectedRows
// // 其余逻辑保持不变
// },
};
},
}
注意的点如下
1、给表格设置rowKey时,尽量不用索引来设置,使用索引来设置会出现禁选项虽然禁选了,但是点击表头全选框的时候依然能被选中的情况,如下图
2、rowSelection写在computed里
3、有禁选项时,给表格行设置默认选中时需要把禁选的项给剔除掉