Vue + element-ui 分页回显、勾选回显

最新推荐文章于 2023-08-16 09:58:54 发布

Your-Nikee

最新推荐文章于 2023-08-16 09:58:54 发布

阅读量3.8k

点赞数 3

分类专栏： Vue 文章标签： Vue回显 table勾选翻页重新显示 element Vue 勾选回显 Vue element-ui 勾选回显 Vue重新勾选

本文链接：https://blog.csdn.net/YourNikee/article/details/102543311

版权

Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

使用element - ui分页组件和table表格，对勾选中的数据进行分页回显（上页选中，点击分页后再次返回页面，勾选中的数据依旧被勾选）

先看看效果
在这里插入图片描述
仅为前端模拟数据处理，希望能给你一些启发
这是引入的组件结构

<el-table
      ref="multipleTable"
      :data="showTableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>

直接引用也可以使用在这里插入图片描述
定义表数据
这里的tableData为前端模拟数据，为了实现类似后端返回的结果，注意：此列表不是渲染列表，如果你有后端给你返回数据，那这个定义可以省略。
showTableData才是渲染数据
哦对，因为分页回显使用的是一个全局变量，所以需要在头部定义两个全局变量，这个是必须必的：在这里插入图片描述
然后再定义表数据，如果是模拟的，那定义数据的时候必须要有一个唯一健哦，比如我定义的id，需要通过这个id向map中添加数据；

tableData:[{
        id:'1',
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:'2',
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:'3',
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:'4',
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'5',
        date: '2016-05-03',
        name: '王小虎5',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'6',
        date: '2016-05-03',
        name: '王小虎6',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'7',
        date: '2016-05-03',
        name: '王小虎7',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'8',
        date: '2016-05-03',
        name: '王小虎8',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      showTableData:[],//渲染列表
      currentPage4: 1, //这个属性是页面加载时分页组件默认选中的页码
      pageTotal:0,//总数据条数
      pageSize:1,//页面默认每页显示条数
      multipleSelection: []//批量选中的列表

接下来是定义方法，哦对，在这之前需要对渲染数据进行一次默认赋值，如果有后台的小伙伴给你返回，这里就调用初始化获取列表的方法

mounted(){
    this.pageTotal = this.tableData.length;
    this.showTableData = [this.tableData[0]] // 初始化默认赋值,为1条数据
  },

接下来才是定义方法

    /**
     * PageSize 修改页面默认显示条数
     * */
    handleSizeChange(val) {
      this.showTableData = this.tableData.slice(0,val);
      this.pageSize = val;
    },
    /**
     * 修改页码
     * */
    handleCurrentChange(val) {
      let list = [...newList];  //映射的步骤也不能省略，尝试过很多次，必须要已中间变量来处理，否则回显会出现预料之外的问题
      this.showTableData = this.tableData.slice((val - 1) * Number(this.pageSize),val * Number(this.pageSize));
      //因为是模拟数据,所以只能在分页上进行回显,正常状态下应该是向后台重新拉取到数据列表的时候,且是在渲染表数据赋值之后进行
      //有后台的小伙伴直接调用获取列表的接口就行了
      // ==============================================以下皆为模拟后台返回数据之后进行，写在给showTableData赋值下边

//$nextTick 延迟渲染，很好用的一个方法
      this.$nextTick(()=>{
      //判断list中的id和当前页面上渲染数据id是否有相等的，有，就执行回显，
      //一定要确保回这里的it字段需要和渲染数据的表字段对应，否则依旧添加不上
        this.showTableData.map(it =>{
          list.map(items=>{
            if (items.id == it.id){
              this.$refs.multipleTable.toggleRowSelection(it)
            }
          })
        })
      })
    },
    /**
     * 批量选中
     * */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.echoData()
    },
    /**
     * 分页回显必须确定一个唯一健,不能有重复
     * 这里可能需要小伙伴去理解一下，不过也没有关系，理解不了也可以直接复制粘贴使用
     * 方法的作用就是当你选中/取消选中的时候，改变全局变量map，和list的值
     * */
    echoData(){
      var temp = [];
      if(this.multipleSelection.length>0){
        var m = new Map();
        for (let i = 0; i < this.multipleSelection.length; i++) {
          m.set(this.multipleSelection[i].id,this.multipleSelection[i].id);
        }
        for (let i = 0; i < this.showTableData.length; i++) {
          if( m.get(this.showTableData[i].id) == null || !m.get(this.showTableData[i].id)){
            temp.push(this.showTableData[i].id);
          }
        }
      }else{
        for (let i = 0; i < this.showTableData.length; i++) {
          temp.push(this.showTableData[i].id);
        }
      }
      //向map添加
      for (let i = 0; i <this.multipleSelection.length ; i++) {
        map.set(this.multipleSelection[i].id,this.multipleSelection[i]);
      }
      //移除
      for (let i = 0; i <temp.length ; i++) {
        map.delete(temp[i]);
      }
      var  list = [];
      
      map.forEach(function(key){
        list.push(key)
      })
      newList = list;
    }

完整代码

<template>
  <div>
    <h3>分页回显</h3>

    <el-table
      ref="multipleTable"
      :data="showTableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>

  </div>
</template>

<script>
  var map = new Map();
  var newList = [];
export default {
  name: 'erji',
  data(){
    return {
      tableData:[{
        id:'1',
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:'2',
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:'3',
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:'4',
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'5',
        date: '2016-05-03',
        name: '王小虎5',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'6',
        date: '2016-05-03',
        name: '王小虎6',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'7',
        date: '2016-05-03',
        name: '王小虎7',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:'8',
        date: '2016-05-03',
        name: '王小虎8',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      showTableData:[],
      currentPage4: 1, //这个属性是页面加载时分页组件默认选中的页码
      pageTotal:0,
      pageSize:1,
      multipleSelection: []
    }
  },
  mounted(){
    this.pageTotal = this.tableData.length;
    this.showTableData = [this.tableData[0]] // 初始化默认赋值,为1条数据
  },
  methods:{
    /**
     * PageSize 修改页面默认显示条数
     * */
    handleSizeChange(val) {
      this.showTableData = this.tableData.slice(0,val);
      this.pageSize = val;
    },
    /**
     * 修改页码
     * */
    handleCurrentChange(val) {
      let list = [...newList];
      this.showTableData = this.tableData.slice((val - 1) * Number(this.pageSize),val * Number(this.pageSize));
      //因为是模拟数据,所以只能在分页上进行回显,正常状态下应该是向后台重新拉取到数据列表的时候,切是在渲染表数据赋值之后进行
      // ==============================================以下皆为模拟后台返回数据之后进行

      this.$nextTick(()=>{
        this.showTableData.map(it =>{
          list.map(items=>{
            if (items.id == it.id){
              this.$refs.multipleTable.toggleRowSelection(it)
            }
          })
        })
      })
    },
    /**
     * 批量选中
     * */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.echoData()
    },
    /**
     * 分页回显必须确定一个唯一健,不能有重复
     *
     * */
    echoData(){
      var temp = [];
      if(this.multipleSelection.length>0){
        var m = new Map();
        for (let i = 0; i < this.multipleSelection.length; i++) {
          m.set(this.multipleSelection[i].id,this.multipleSelection[i].id);
        }
        for (let i = 0; i < this.showTableData.length; i++) {
          if( m.get(this.showTableData[i].id) == null || !m.get(this.showTableData[i].id)){
            temp.push(this.showTableData[i].id);
          }
        }
      }else{
        for (let i = 0; i < this.showTableData.length; i++) {
          temp.push(this.showTableData[i].id);
        }
      }

      for (let i = 0; i <this.multipleSelection.length ; i++) {
        map.set(this.multipleSelection[i].id,this.multipleSelection[i]);
      }
      for (let i = 0; i <temp.length ; i++) {
        map.delete(temp[i]);
      }
      var  list = [];
      map.forEach(function(key){
        list.push(key)
      })
      newList = list;
    }
  }
}
</script>

<style scoped>

</style>

Your-Nikee

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
Vue + element-ui 分页回显、勾选回显

使用element - ui分页组件和table表格，对勾选中的数据进行分页回显（上页选中，点击分页后再次返回页面，勾选中的数据依旧被勾选）先看看效果仅为前端模拟数据处理，希望能给你一些启发这是引入的组件结构<el-table ref="multipleTable" :data="showTableData" tooltip-effect="da...
复制链接

扫一扫