ant design vue表格table 默认勾选特定几项

本是古典何须时尚 2022-12-26 04:44 480阅读 0赞

关于网上这个答案真的无法言说，仿佛都出资同一人手笔，废话不多说，上代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]

<template>
      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
        <a slot="name" slot-scope="text">{ {  text }}</a>
      </a-table>
    </template>
    <script>
    const columns = [
      { 
        title: 'Name',
        dataIndex: 'name',
        scopedSlots: {  customRender: 'name' },
      },
      { 
        title: 'Age',
        dataIndex: 'age',
      },
      { 
        title: 'Address',
        dataIndex: 'address',
      },
    ];
    const data = [
      { 
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      { 
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      { 
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      { 
        key: '4',
        name: 'Disabled User',
        age: 99,
        address: 'Sidney No. 1 Lake Park',
      },
    ];
    
    export default { 
      data() { 
        return { 
          data,
          columns,
        };
      },
      computed: { 
        rowSelection() { 
          return { 
            onChange: (selectedRowKeys, selectedRows) => { 
              console.log(`selectedRowKeys: ${ selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({ 
              props: { 
                defaultChecked: ['2','3'].includes(record.key)
              },
            }),
          };
        },
      },
    };
    </script>

**重点：**

*  官网是有例子可寻的，只不过给的是正向的例子，其中defaultChecked里\[‘2’,‘3’\]其实是我们要选中的集合，这里实际结合业务逻辑，可以理解为数组里放的全是要选中的id(你的数据里必须要有id这个属性),record.key则可以理解为你data数据中每一项中的id(你的数据里必须要有id这个属性)

**如果要数据重新给选中，则要结合下面的代码，具体业务逻辑要结合实际内容：**

//先要在data中定义
       record: '',
       rowSelection: { 
        selectedRowKeys: [],
        onChange: this.onSelectChange
       }
    
    //这里需要在methods中写，不能直接暴露在外面，结合自己的业务
    this.rowSelection = { 
         selectedRowKeys: selectedRowKeys,  //这里指的是选中的数组集合，例如["2","3"]
         onChange: this.onSelectChange,  //使用getCheckboxProps必须结合onChange，官网有介绍
         getCheckboxProps: record => {   //record代表的是上边示例data的数据
          return { 
           props: { 
            defaultChecked: selectedRowKeys.includes(record.key)   //这里意思是选中key为2,3的两项
           }
          };
         }
    
    
    onSelectChange (selectedRowKeys) { 
       // 去重 Array.from(new Set(arr))
       this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: /images/20221120/e71a588f82294a3bbb8975892ad86de8.png