ElementUI表格多选框根据后端传来的数据进行数据回显

Posted pzw23

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI表格多选框根据后端传来的数据进行数据回显相关的知识,希望对你有一定的参考价值。

前端部分代码:重要的是ref="multipleTable"this.$refs.multipleTable.toggleRowSelection(需要勾选的行数据,是否勾选)

<el-table
        :data="items"     //这个items是我定义的数据,用于接收后端传来的表格数据(items里面包含多个对象数据),表格遍历显示
        :row-key="getRowKey"   //多选框时是必要的
        @selection-change="selectAjgl"  //勾选和取消勾选都会触发这个selectAjgl函数
        ref="multipleTable"  //可以用来做数据回显打勾!!!
      >
        <el-table-column type="selection" :reserve-selection="true" /> //多选框需有一列表格类型为selection,reserve-selection="true"表示翻页了选项保留
onOldAjglId() {
      httpGet(`/iron/rwgl/selectAjgl/?id=${this.$route.params.id}`)
        .then(rst => {//查询后端得到以前被选的数据,我后端返回的是数据id集合
this.oldAjglId = rst; if (rst.length > 0) { for (var i = 0; i < rst.length; i++) { for (var j = 0; j < this.items.length; j++) { if (this.oldAjglId[i] === this.items[j].id) {//items里面包含有的都回显打勾
this.$refs.multipleTable.toggleRowSelection(//回显打勾核心,toggleRowSelection的第一个参数是需要打勾的那一行数据,第二个参数表示是否选中,传true
this.items[j], true ); } } } } this.ondamx(rst); }) .catch(e => this.$message.error(e.message)); }, getRowKey(row) { return row.id; },

  

以上是关于ElementUI表格多选框根据后端传来的数据进行数据回显的主要内容,如果未能解决你的问题,请参考以下文章

ElementUI的Table表格添加自定义头CheckBox多选框

VUE ElementUI 表格多选框实现单选

ElementUI 将table多选框改为单选框的解决办法

vue修改弹框的多选框会影响表格的内容

elementui table表格后端分页 ,改变pagesize或者改变page扔保持复选框状态

elementui表格div变化,内容没有响应