ant design vue 表格table 默认勾选几项的操作

 更新时间:2020年10月31日 15:48:26   作者:喝着绿茶的猫  
这篇文章主要介绍了ant design vue 表格table 默认勾选几项的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

为什么我同样的功能要用react 、vue 都写一遍 ?

啊我真是不是闲的蛋疼啊(~ o ~)~zZ

在 ant design vue 中,表格的第一列是联动的选择框

截一张官方文档图,图示最后一排就是禁用状态

点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。

 onChange: (selectedRowKeys, selectedRows) => {
  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
 },

默认禁用disable 某项时,官方文档给出了例子:

  rowSelection() {
   const { selectedRowKeys } = this;
   return {
    onChange: (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
     props: {
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
     }
    }),
   }
  }

主要是getCheckboxProps 里面的disabled 属性控制的。

默认选中某项时,需要 getCheckboxProps 里面的defaultChecked 属性控制:

业务场景:勾选了几项保存之后,下次进来编辑还是需要展示之前勾选的项,这时候就用到了默认勾选的属性

之前只贴了核心逻辑,好多人好像没看懂,我把整体的都贴上来了。

核心代码defaultChecked: selectedRowKeys.includes(record.id) 的思路就是所有表格里所有包含已选中项的id,都给他默认选中

data () {
  return {
   // ... 
   record: '',
   rowSelection: {
    selectedRowKeys: [],
    onChange: this.onSelectChange
   }
 },
 methods: {
   handleEdit (record) {
   //...省略我的业务逻辑
    if (record) {
    //...省略我的业务逻辑
    let selectedRowKeys =
     (record.roleIdList.length > 0 && record.roleIdList.split(',')) || [];
    this.rowSelection = {
     selectedRowKeys: selectedRowKeys,
     onChange: this.onSelectChange,
     getCheckboxProps: record => {
      return {
       props: {
        defaultChecked: selectedRowKeys.includes(record.id)
       }
      };
     }
    };
   } else {
    this.record = '';
    this.rowSelection = {
     selectedRowKeys: [],
     onChange: this.onSelectChange
    }
   }

 },
 onSelectChange (selectedRowKeys) {
   // 去重 Array.from(new Set(arr))
   this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
 }
 }

ant design vue 版本和 react 版本写法略有不同,disabled 和 defaultChecked 都挂在了props 属性下。

补充知识:Ant-Design-Pro中Table组件rowSelection方法的一些坑

如下所示:

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

在 <Table/> 组件中有 rowSelection={rowSelection} 方法,可以让Table的第一列成为联动的选择框。

API中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是,selectedRowKeys 控制的只是dataSource当前的顺序编号。

一定要加上rowKey="id"或者rowKey={record => record.id},后来经过多次调试发现很多BUG都跟这个参数有关,不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。

以上这篇ant design vue 表格table 默认勾选几项的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数)

    这篇文章主要介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue SSR 组件加载问题

    Vue SSR 组件加载问题

    这篇文章主要介绍了Vue SSR 组件加载问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue实现简单实时汇率计算功能

    vue实现简单实时汇率计算功能

    这篇文章主要为大家详细介绍了vue实现简单实时汇率计算功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • vue 设置 input 为不可以编辑的实现方法

    vue 设置 input 为不可以编辑的实现方法

    今天小编就为大家分享一篇vue 设置 input 为不可以编辑的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Vue如何实现打包资源按时间戳方式

    Vue如何实现打包资源按时间戳方式

    这篇文章主要介绍了Vue如何实现打包资源按时间戳方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • Vue自定义弹窗指令的实现代码

    Vue自定义弹窗指令的实现代码

    使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
    2018-08-08
  • echarts实现获取datazoom的起始值(包括x轴和y轴)

    echarts实现获取datazoom的起始值(包括x轴和y轴)

    这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue electron零基础使用教程

    Vue electron零基础使用教程

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue添加vue-awesome-swiper轮播组件方式

    vue添加vue-awesome-swiper轮播组件方式

    这篇文章主要介绍了vue添加vue-awesome-swiper轮播组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论