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 sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Bootstrap插件全集
Jul 18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 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 单引号与双引号的区别
2009/11/24 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python的exec、eval使用分析
2017/12/11 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
大学生军训广播稿
2014/01/24 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
基督教婚礼主持词
2014/03/14 职场文书
2019年工作总结范文
2019/05/21 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Python几种酷炫的进度条的方式
2022/04/11 Python