elementUI的table默认全选,并解决跨分页取消选中回显的问题,并拿到取消选中的集合(一般用于table数据很多需要给选中的项发短信等需求)

elementUI的table默认全选,并解决跨分页取消选中回显的问题,并拿到取消选中的集合(一般用于table数据很多需要给选中的项发短信等需求)

在这里插入图片描述

第一步:请求出列表数据,进行全选:(arr是请求回来的数据,cancelSelection是取消选中的集合)

handleTempSelected(arr) {
   
      if (arr.length) {
   
        let result1 = []
        let result2 = []
        for (var i = 0; i < arr.length; i++) {
   
          var arAi = arr[i]
          var propA = arAi.baseId
          var flag = false
          for (var j = 0; j < this.cancelSelection.length; j++) {
   
            
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
针对你的问题elementUI 的级联选择器(Cascader)组件提供了一些属性和方法,可以实现全选/取消全选和按勾选顺序回显排序的功能。 1. 全选/取消全选 elementUI 的级联选择器(Cascader)组件提供了一个 checkStrictly 属性,可以控制级联选择器是否可以全选取消全选。当 checkStrictly 为 true 时,级联选择器可以全选取消全选;当 checkStrictly 为 false 时,级联选择器只能单选或多选。 2. 按勾选顺序回显排序 elementUI 的级联选择器(Cascader)组件提供了一个 value 属性,可以设置级联选择器的选中。当级联选择器的选是固定的时候,可以通过设置 value 属性来回显选中;当级联选择器的选是动态生成的时候,可以通过监听级联选择器的 change 事件,获取选中的顺序和值,并进行排序和回显。 下面是一个简单的示例代码,实现了全选/取消全选和按勾选顺序回显排序的功能: ```html <template> <el-cascader :options="options" :check-strictly="true" :value="selectedItems" @change="handleChange" @expand-change="handleExpandChange" @clear="handleClear" ></el-cascader> </template> <script> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' }, ], }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' }, ], }, ], }, ], selectedItems: [], }; }, methods: { handleChange(value, selectedItems) { this.selectedItems = selectedItems; }, handleExpandChange() { // do something }, handleClear() { this.selectedItems = []; }, }, }; </script> ``` 在上面的示例代码中,我们通过设置 checkStrictly 属性为 true,开启了全选/取消全选的功能。同时,我们监听了级联选择器的 change 事件,在选中发生变化时,更新 selectedItems 数组的值,并实现了按勾选顺序回显排序的功能。 希望这个回答对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值