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));
 }
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值