方法一:

官方也有基于这种操作给出通过属性解决的方法:

<el-table :row-key="rowKey">
     <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
methods: {
   rowKey (row) {
      return row.id
    }
}

首先官网中对参数的描述是这样的:

:row-key :行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function

:reserve-selection :仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key),该属性默认值为false

知道这些了,同时你还需要toggleRowSelection和clearSelection两个属性。

toggleRowSelection:

参数:row, selected

用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)

clearSelection:用于多选表格,清空用户的选择。

结合这四个属性可以实现基本的表格选中,分页打勾留存状态,但是对于一些非常规操作打勾却不是很适用。

 

我遇到的需求是这样的首先在页面表格中点击 加号(图一),数据表格的弹窗会打开(图二),在弹窗中勾选需要的数据可以分页去选择,然后点击确定将选中的数据塞回页面的表格中(图一),再次点击 加号 弹窗打开 页面表格中的数据打勾情况会回显在弹窗中(图二)。

 

方法二:

我选用的方法分别是表格的两个选中方法 select和select-all,toggleRowSelection方法,整体的逻辑

1.单选时,判断临时存储的数组是否为空,为空则直接push,不为空则判断页面中是否存在该数据,存在则剪切掉代表取消打勾,不存在则push进去。

2.全选时,判断参数val是否存在,存在即是代表全部选中,直接push到临时数组,然后进行数组去重即可,如果val为空,则是代表全取消,因为选中的是当前页面的数据,所以直接从临时数组中删掉当前分页页面的数据即可。

3.最后要做的就是在每次数据加载的时候 使用toggleRowSelection的方法,让弹窗中的数据回显

来上代码:

<el-table
        ref="multipleGoodsList"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <el-table-column type="selection"></el-table-column>
</el-table>
export default {
  data() {
    return {
         goodsList: [], //弹窗中每次请求的页面数据
         selectedGoodsList:[]//临时选中的数组   
         selectedGoods:[] //页面中的表格    
        
    }
  },
    methods: {
    //获取弹窗内的数据
         getGoodsListFun() {
              ...
              // 拿到数据后
            // 当再次打开
            this.$nextTick(() => {
              if (this.selectedGoodsList.length && this.selectedGoodsList.length > 0) {
                this.goodsList.forEach(row => {
                  this.selectedGoodsList.forEach(p => {
                    if (row.id === p.id) {
                      this.$refs.multipleGoodsList.toggleRowSelection(row);
                    }
                  });
                });
              }
            });
            ...
        },
    //单选
        handleSelect(selection,row){
          if(this.selectedGoodsList.length && this.selectedGoodsList.length >0){
            let index
            index = this.isSelectedGoods(row, this.selectedGoodsList)
            if (index > -1) {
              this.selectedGoodsList.splice(index, 1);
            } else {
              this.selectedGoodsList.push(row);
            }
          }else{
            this.selectedGoodsList.push(row)
          }
        },
   //判断是否存在的方法
        isSelectedGoods(row, list) {
          let rows = JSON.parse(JSON.stringify(row))
          //是否选取 -1表示没选中
          return list.findIndex(item => {
            return item.id == rows.id;
          });
        },
    //全选
        handleSelectAll(val){
            //全选
          if(val && val.length > 0){
            val.forEach(row=>{
              this.selectedGoodsList.push(row)
            })
            //数组去重
            let newData = {};
            this.selectedGoodsList = this.selectedGoodsList.reduce((preVal, curVal) => {
              newData[curVal.id]? "": (newData[curVal.id] = true && preVal.push(curVal));
              return preVal;
            }, []);
          }else{
            //全不选 直接从数组中删除当页的数据
            for(let i = 0;i<this.goodsList.length;i++){
              let index 
              index = this.isSelectedGoods(this.goodsList[i], this.selectedGoodsList)
              if (index > -1) {
            this.selectedGoodsList.splice(index, 1);
              } else {
                this.selectedGoodsList.push(this.goodsList[i]);
              }
            }
          }
        },
    //弹窗上的确定选择按钮
        choiceGoodsFun() {
          this.selectedGoods = JSON.parse(JSON.stringify(this.selectedGoodsList))
          this.closeDialog();
        },
    //关闭弹窗
        closeDialog(){
            this.selectedGoodsList = [];
        },
    //打开弹窗
    openDialog(){
        this.selectedGoodsList = JSON.parse(JSON.stringify(this.selectedGoods));
    }
     
}

项目着急临时想的方法,欢迎有更好的方法的大佬指教

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐