vue ant-design中table选中默认项的实现

最新推荐文章于 2024-08-27 15:50:43 发布

reembarkation

最新推荐文章于 2024-08-27 15:50:43 发布

阅读量4k

点赞数 3

分类专栏： js vue 文章标签： javascript vue 前端

本文链接：https://blog.csdn.net/reembarkation/article/details/125525633

版权

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

vue

48 篇文章 0 订阅

订阅专栏

看有网友提出如何绑定table中的默认行，这里简单的介绍一下：

1.首先table中设置属性row-selection，还要设置主键rowKey例如：

 <a-table
      :row-selection="rowSelection"
      :columns="columns"
       :data-source="dataSource"
       :rowKey="
          (record) => {
            return record.id;
          }
        "
    >

2.设置计算属性rowSelection，代码如下：

computed: {
     
      rowSelection() {
        return {
          // 默认绑定项
          getCheckboxProps: (record) => ({
            props: {
              disabled: false, // Column configuration not to be checked
              name: '',
              defaultChecked: this.selectedKeys&&this.selectedKeys.length>0?this.selectedKeys.includes(record.id):false,
            },
          }),

其中this.selectedKeys就是你要绑定的keys的集合。这样在列表渲染后，selectedKeys的行的checkbox就会默认选中了。