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 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
再探JavaScript作用域
Sep 24 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python实现分段线性插值
2018/12/17 Python
Python骚操作之动态定义函数
2019/03/26 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
高级运动鞋:GREATS
2019/07/19 全球购物
平面设计的岗位职责
2013/11/08 职场文书
绩效考核实施方案
2014/03/18 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
应届大专生求职信
2014/06/26 职场文书
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers