美文网首页
el-table expand-change 第一次点开不显示,

el-table expand-change 第一次点开不显示,

作者: 前端小飞象 | 来源:发表于2022-02-11 16:57 被阅读0次

需求是点击后请求接口数据,然后展示在下方

截图20211110165600.png

使用的是expand-change事件处理。

  1. 直接往表格中每一行添加的一个字段,用于在下方展示。表格出现了需要点击两下,表格才会重新刷新。 使用了dolayoutthis.$forceUpdate() 都没有作用。
    解决办法:后来采用的是将表格重新赋值。2. 表格出现可以刷新,但是会闪一下,并且点不开。
    解决办法:后面加上 row-key="id",正常了
  <el-table ref="table" row-key="id" :data="rows" size="mini" header-cell-class-name="header-bg" @expand-change="load">
    <el-table-column type="expand">
      <template slot-scope="scope">
          //表格点击后中展示的地方
      </template>
    </el-table-column>
    <el-table-column label="出发港" width="100">
      <template slot-scope="scope">
        {{ scope.row.pol }}
      </template>
    </el-table-column>
  </el-table>
    async load(row) {
      const res = await matrixDetail.get({ matrixId: row.id })
      const tables = this.rows
      tables.forEach((item, index) => {
        if (item.id === row.id) {
          item['units'] = res.content
        }
      })
      this.rows = JSON.parse(JSON.stringify(tables))
    },

相关文章

网友评论

      本文标题:el-table expand-change 第一次点开不显示,

      本文链接:https://www.haomeiwen.com/subject/pahizltx.html