zoukankan      html  css  js  c++  java
  • 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; },

      

  • 相关阅读:
    冒泡排序(可传函数参数)
    字符串转化成整数
    遍历文档内容,得到HTML层级结构
    跨域通信问题
    矩阵的快速幂
    CSS tricks
    牛客赛马网笔试攻略
    项目中遇到的问题
    Mysql远程链接访问权限设置
    恢复delete删除的数据
  • 原文地址:https://www.cnblogs.com/pzw23/p/12077912.html
Copyright © 2011-2022 走看看