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

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

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、有禁选项时,给表格行设置默认选中时需要把禁选的项给剔除掉

相关推荐
四喜花露水18 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy27 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web