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


Posted in Javascript onOctober 31, 2020

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

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

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

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

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

点击 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 默认勾选几项的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
解决pycharm双击但是无法打开的情况
Oct 31 #Javascript
You might like
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
python简单实现刷新智联简历
2016/03/30 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python调用C/C++的方法解析
2020/08/05 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
最新计算机专业自荐信
2013/10/16 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
运动会通讯稿150字
2014/02/15 职场文书
五四青年节演讲稿
2014/05/26 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书