element ui 表格节点 expand - change 控制每次只展开一行

element ui 表格控件每次只展开一行

在项目中经常会有表格嵌套表格或者表格嵌套表单动态渲染的情况，这时候就可以使用表格的原生控件expand属性具体用法看官网文档https://element.eleme.cn/#/zh-CN/component/table，但是官网给的是点开一行，再点击下一行时上一次点开的不收起，依然打开，这样数据渲染的时候会有问题。expand - change的使用方法为当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）同时可以调用接口 具体参考官网

代码如下

 <el-table

        v-loading="loading"

        ref="refTable"

        :data="eqTableData"

        :max-height="hight"

        :row-key="getRowKeys"   //获取当前行id

        :expand-row-keys="expands"    //只展开一行放入当前行id

        @expand-change="exChange"

      >

        <el-table-column type="expand">

          <template slot-scope="scope">

            <el-table

              ref="tableChild"

              :data="dataList"

              align="center"

            >

              <el-table-column

                align="center"

                label="时间"

                prop="recordDate"

              />

              <el-table-column

                label="参数"

                prop="param"

                min-width="50%"/>

              <el-table-column

                label="异常原因"

                prop="reason"

                min-width="50%"/>

              <el-table-column

                align="center"

                label="预计读数"

                prop="predictData"

                min-width="50%"/>

              <el-table-column

                align="center"

                label="实际读数"

                prop="actualData"

                min-width="50%"

              />

              <el-table-column

                align="center"

                label="操作"

              >

                <template slot-scope="scope">

                  <el-button

                    size="mini"

                    @click="handleIgnore(scope.$index, scope.row)">忽略</el-button>

                  <el-button

                    size="mini"

                    type="danger"

                    @click="handleCorrect(scope.$index, scope.row)">修正</el-button>

                </template>

              </el-table-column>

            </el-table>

          </template>

        </el-table-column>

        <el-table-column

          label="设备ID"

          prop="eqId"/>

        <el-table-column

          label="所在大厦"

          prop="blName"/>

        <el-table-column

          label="所在楼层"

          prop="flName"/>

      </el-table>

 

export default {

data() {

    return {

　　//设置row-key只展示一行

 expands: [],//只展开一行放入当前行id

      getRowKeys: (row) => {/获取当前行id

        // console.log(row)

        return row.eqId   //这里看这一行中需要根据哪个属性值是id

      },

eqTableData: [],

      dataList: []

}

}

methods：{

 

exChange(row, rowList) {

      // console.log(row)

      this.loading = true

      

  var that = this

      if (rowList.length) { // 只展开一行//说明展开了

        that.expands = []

        if (row) {

          that.expands.push(row.eqId)// 只展开当前行id

        }

      //  this.tablaData(row.eqId)  这里可以调用接口数据渲染

      } else { // 说明收起了

        that.expands = []

      }

    }

}

}