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

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript