zoukankan      html  css  js  c++  java
  • Element-Ui实现分页table缓存勾中数据

    1、在el-table上设置 row-key 属性

    <el-table
          ref="tableRef"
          v-loading="loading"
          :data="tableData"
          height="calc(100vh - 152px)"
          row-key="id"
          border
          style=" 100%"
          @selection-change="handleSelectionChange"
        >
        .....
    </el-table>
    

    2、对 type=selection 的列,设置reserve-selection属性(该属性默认为false)

    ...
    <el-table
          ref="tableRef"
          v-loading="loading"
          :data="tableData"
          height="calc(100vh - 152px)"
          row-key="id"
          border
          style=" 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed
            :reserve-selection="true"
            align="center"
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            align="center"
            type="index"
            label="序号"
            width="55"
          />
        .....
    </el-table>
    ...
    

    4、至此分页的table切换pageNum时,可以实现缓存选中状态的数据。

    5、存在一个特殊情况需要处理:如果用户输入了过滤条件进行检索,但是之前选中的数据被过滤掉了,此时对于用户来说是不知道系统将上次选中的数据也包含到这次勾选的数据中。

    第一次勾选的数据

    解决方案:

    在用户重新查询的方法中,清空之前选中的数据。

    ...
    searchBtn() {
    	this.loading = true
    	...
    	// 查询后清除先前选中的数据,防止之前选中的数据被过滤掉,但是还存储this.$refs.tableRef.selection这个选中列表中。
    	this.$refs.tableRef && this.$refs.tableRef.clearSelection() 
        this.loading = false
    }
    ...
    
  • 相关阅读:
    个人博客作业Week2
    个人作业
    软件工程——个人博客作业三
    软工个人博客二
    软件工程——个人博客作业一
    Linux服务器搭建常用环境(一)
    Swift学习之语言基础
    Python——函数的参数
    Python——函数的调用
    Python 导语
  • 原文地址:https://www.cnblogs.com/520future/p/15128146.html
Copyright © 2011-2022 走看看