element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显 element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显 element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显

element-ui 的官网是有属性的

el-table-colum 的 reserve-selection 属性

el-table 的 row-key 属性

row-key 属性传入唯一值

<el-table
  :data="tableData"
  border
  stripe
  v-loading="tableloading"
  ref="multipleTable"
  row-key="equipmentId"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" label="序号" reserve-selection width="50"></el-table-column>
</el-table>

row-key 属性传入一个方法

<el-table
  :data="tableData"
  border
  stripe
  v-loading="tableloading"
  ref="multipleTable"
  :row-key="getRowKeys"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" label="序号" reserve-selection width="50"></el-table-column>
</el-table>

getRowKeys(row) {
  return row.equipmentId
},

编辑回显数据

核心：this.$refs.multipleTable.toggleRowSelection(val, true)文章来源地址https://www.toymoban.com/news/detail-616987.html

// 数据列表
dataTable() {
  let vm = this;
  let url = vm.common.data().wisdomCommunityWeb + "/upgrade/plan/equipment-page-list";
  let data = {};
  data = { ...vm.dataForm, ...vm.pages };
  vm.tableloading = true
  vm.common.getdata(vm, url, data, function (res) {
    vm.tableloading = false;
    vm.tableData = res.data;
    vm.pages.num = res.total;
    vm.tableData.forEach((item) => {
      if(item.isCheck == 2) {
        vm.$refs.multipleTable.toggleRowSelection(item)
      }
    });
  });
},

到了这里，关于element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显 element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！