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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
php检测文件编码的方法示例
2014/04/25 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
详解Angular6 热加载配置方案
2018/08/18 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python实现kMeans算法
2017/12/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python实现抽奖小程序
2020/04/15 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python更换pip源方法过程解析
2020/05/19 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
django教程如何自学
2020/07/31 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
接待员岗位责任制
2014/02/10 职场文书
纠风工作实施方案
2014/03/15 职场文书
继承公证书
2014/04/09 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
小学中队长竞选稿
2015/11/20 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis