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

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

<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));
 }

猜你喜欢

转载自blog.csdn.net/qq_45432996/article/details/110524298
今日推荐