element框架table多选分页时保留原有选中项（vue2和vue3均适用）

最新推荐文章于 2024-09-13 16:02:27 发布

weixin_54553882

最新推荐文章于 2024-09-13 16:02:27 发布

阅读量1.1k

点赞数 2

文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/qq_43628158/article/details/128812823

版权

element中table表格多选+分页
1、表格多选
手动添加一个 el-table-column，设 type 属性为 selection 即可；

<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
    <el-table-column type="selection" width="55" />
    <el-table-column property="name" label="Name" width="120" />
</el-table>
</template>
<script>
export default {
  name: "eleTable",
  data() {
    return {
        tableData: [{
              id:1,
              date: "2016-01-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id:2,
              date: "2017-03-04",
              name: "王虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              id:3,
              date: "2017-04-01",
              name: "王小",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              id:4,
              date: "2016-05-03",
              name: "李三",
              address: "上海市普陀区金沙江路 1516 弄"
            }
        ],
    },
    methods:{
        //用户多选
        handleSelectionChange(e){
            sendForm.value.deptList = e;
        },
    }
}
</script>

2、分页时翻页保留原有选中项涉及属性

row-key【table属性】：行数据的 Key，用来优化 Table 的渲染；在使用reserve-selection功能与显示树形数据时，该属性是必填的。
reserve-selection【Table-column 属性】：仅对 type=selection 的列有效，请注意，需指定 row-key 来让这个功能生效

<template>
<el-table
:data="selTabelData"
:row-key="selRowKey"
@selection-change="handleSelectionChange"
>
    <el-table-column type="selection" align="center" width="55" reserve-selection />
    <el-table-column property="name" label="Name" width="120" />
</el-table>
<el-pagination
layout="prev, pager, next"
hide-on-single-page
:current-page="selHoverPage"
:page-size="selPagesize"
:total="6"
@current-change="selPageChange"
>
</el-pagination>
</template>
<script>
export default {
  name: "eleTable",
  data() {
      selTabelData:[],//多选表格数据
      selHoverPage:1, //多选下分页当前选中页数
    selPagesize:2, //多选下分页每页条数限制 
  },
  mounted() {
      this.selTabelData = this.tableData.slice(0,this.selPagesize);
  },
  methods:{
      //为行设置独有key
      selRowKey(row){
        // console.log(row);
        return row.id
    },
    //多选下分页事件
    selPageChange(e){
        console.log(e);
        //重新调取接口获取数据，或者前端处理均可
        //this.selTabelData = this.tableData.slice(this.selPagesize*(e-1),this.selPagesize*e);
    },
    
  }
}
</script>