【Vue】element-ui中多选表格如果配合分页数据如何回显？

Z时代
2024-01-10
分类：技术分享

最近在用element-ui vue版开发运营系统，分页是后端来分页，前端用的element-ui，现在在做一个多选表格
如下图
【Vue】element-ui中多选表格如果配合分页数据如何回显？
每一次分页，都会获得列表，渲染在表格上，要求用户点击表格，第一页第二页随便点，最后点击保存，会向后端传送一个关于id的数组，这个容易实现，用本地存储起来就可以。那么我从后端获取数据的时候，如何回显呢？因为每次跳到第一页和第N页都需要渲染那个选中状态，有类似的demo吗？

回答

reserve-selection与row-key结合

<el-table :data="pageData" ref="goodsTable" size="small" v-loading="loading" height="520" @selection-change="handleSelectionChange" :row-key="getRowKeys">
    <el-table-column type="selection" :reserve-selection="true" width="50" prop="id">
    </el-table-column>
    <el-table-column label="编号" prop="goodsCode" width="130">
    </el-table-column>
    <el-table-column label="品名" prop="tradeName" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="规格" prop="specification" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="最小包装" prop="minPack" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="状态" prop="saleState" width="100">
        <template scope="scope">
            <el-tag>{{scope.row.saleState | statusFilter}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="生产厂家" prop="manufacturer" show-overflow-tooltip>
    </el-table-column></el-table>

export default {
    filters: {
        statusFilter(status) {
            if (status !== '' && status !== null) {
                const statusMap = {
                    '1': '待审批',
                    '2': '销售中',
                    '3': '已拒批',
                    '4': '已停售'
                };
                return statusMap[status];
            }
            return '—';
        }
    },
    data() {
        pageData: [],
        loading: false,
        // 获取row的key值
        getRowKeys(row) {
            return row.id;
        },
        selectedData: []
    },
    methods: {
        handleSelectionChange(rows) {
            this.selectedData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.selectedData.push(row.id);
                    }
                });
            }
            console.log(this.selectedData);
        }
    }}

官网的demo稍改改就可以了

<div id="app">
<template>
  <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template 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>
</template></div>

var Main = {
    data() {
      return {
        tableData3: []
      }
    },
    methods: {
      // mock 数据获取 
      getList() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([{
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-06',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-07',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }])
          }, 500)
        })
      }
    },
    created() {
      this.getList().then(data => {
        this.tableData3 = data
        // 只需在这样根据行ids过滤出要选中的行
        // this.tableData3.filter
        this.tableData3.forEach((row, index) => {
          // 演示选中奇数行
          if (index % 2) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            })
          }
        })
      })
    }
  }
var Ctor = Vue.extend(Main)new Ctor().$mount('#app')