记录一下处理element table表格数据多选翻页回显实现

最新推荐文章于 2023-06-28 15:17:17 发布

Mr_SnakeZ

最新推荐文章于 2023-06-28 15:17:17 发布

阅读量383

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Mr_SnakeZ/article/details/130237447

版权

table表格数据多选回显实现

实现结果

在这里插入图片描述

HTML代码——截取

<div>
      <el-dialog title="新增" :visible.sync="dialogTableForAddProject" row-key="getRowKeys">
        <el-table :data="projectList" ref="projectTableRef" @select="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="项目名称/企业名称" align="center" prop="projectName" />
          <el-table-column label="申报年份" align="center" prop="baseYear" />
          <el-table-column label="区域" align="center" prop="belongToArea" />
        </el-table>
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="queryProjectParams.current"
        :page-size="queryProjectParams.size" @size-change="sizeChangeOfProject" @current-change="currentChangeOfProject" :page-sizes="projectSize"
        :total="projectTotal">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableForAddProject = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableForAddProject = false">确 定</el-button>
      </div>
      </el-dialog>
    </div>

需要注意的几个点
① row-key=“getRowKeys” 必须要有
②@select=“handleSelectionChange” 处理选中数据的
③这里是在接口查询时进行勾选回显的，也可以在翻页时进行回显勾选处理

JS代码——截取


data() {
   
return {
   
    groupId:'', //接收路由参数
    
    dialogTableForAddProject:false,
    queryProjectParams:{
   
        groupId:'',// 项目组ID
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
    },//查询项目列表参数
    projectTotal:0, // 可新增项目数量总数
    projectSize: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    projectList:[], //项目数据
    allProjectIds:[], // 汇总总选择的项目ID
    pageProjectIds:[]  //当前页选择的项目ID

};
},
methods: {
   

    // 打开新增项目弹框
    
    openAddProjectDialog(){
   
      this.queryProjectParams.groupId = this.$route.query.groupId;
      this.getProjectList()
      this.dialogTableForAddProject = true
    },

    // 查询可新增项目列表参数
    getProjectList(){
   
      projectRelationPageList(this.queryProjectParams).then(response => {
   
          if(response.data.code=='0'){
   
            this.projectList = response.data.data.records
            this.projectTotal = response.data.data.total
            this.setCheckBox();
          }
        });
    },

    // 多选框选中数据
    handleSelectionChange(selection,row) {
   
      let selected = selection.length && selection.indexOf(row) !== -1
      if(!selected){
   
        // 取消勾选，剔除
        var i = this.allProjectIds.indexOf(row.instId);
        if(i > -1){
   
          this.allProjectIds.splice(i,1)