ant表格根据条件或者状态做勾选+跨行勾选的selectionRows

应用到一个api getCheckboxProps
在这里插入图片描述
效果图:
只允许勾选状态为 ‘使用中’ 的数据
在这里插入图片描述
代码:

注意:涉及勾选一定要定义rowKey唯一值

<a-table
	 ref="table"
	 size="middle"
	 :scroll="{x:true}"
	 bordered
	 :rowKey="rowKey"
	 :columns="columns"
	 :dataSource="dataSource"
	 :pagination="ipagination"
	 :loading="loading"
	 :rowSelection="rowSelection"
	 class="j-table-force-nowrap"
	 @change="handleTableChange">
</a-table>
computed: {
    
    
    rowSelection() {
    
    
        return {
    
    
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          getCheckboxProps: record => ({
    
    
              props: {
    
    
              // 这里的'使用中'的crowdStatus为'2'
                  disabled: record.crowdStatus != '2'
              }
            }),
        }
    },
  },

跨行勾选:

onSelectChange (selectedRowKeys, selectionRows) {
    
    
        this.selectedRowKeys = selectedRowKeys;
        const arr  = Array.from(new Set([...this.selectionRows, ...selectionRows]))
        const list = this.selectedRowKeys.map(item => arr.filter(aItem => aItem[this.rowKey] == item)[0])
        this.selectionRows = list
  },

猜你喜欢

转载自blog.csdn.net/qq_43061933/article/details/125662159