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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
python模拟事件触发机制详解
2018/01/19 Python
python多进程实现文件下载传输功能
2018/07/28 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
计算机科学系职业生涯规划书
2014/03/08 职场文书
新书发布会策划方案
2014/06/09 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
优秀班组事迹材料
2014/12/24 职场文书