当前位置：首页 > article >正文

ant-design-vue的table组件的首列复选框设置问题，包括设置默认选中，设置禁选条件

article 2025/3/11 11:00:24

想要使用表格的复选框列并控制复选框是否可选，先上代码如下

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
          //   // 其余逻辑保持不变
          // },
        };
      },
	}