Skip to content

GitLab

Closed
Created by liuyajun@liuyajunMaintainer

element-ui 中 el-table 组件 expand 会渲染两次模板内容

element-ui 中 el-table 组件 expand 会渲染两次模板内容

image

  • 当 el-table 某列使用了 fixed 属性，el-table 会为了实现 fixed 渲染多次
  • 通过判断其父级组件（$parent，即 table 实例）的 fixed 属性为 undefined，来辨别真正显示在 table 内的该组件实例（非 fixed 的那个）
  • 所以 fixed = undefined 的组件，才执行后续的方法
  • 但如果隐藏的 fixed 的组件因为没有加载数据，高度没有同步，会导致悬浮列的组件高度不统一，出现错位的问题
  • 所以影响组件高度的方法，无论是否有 fixed 都要去执行

src/views/customer-service/pages/tasks/components/TableListExpand.vue

  computed: {
    visible() {
      return !this.$parent.fixed;
    }
  },
  mounted() {
    this.loadDetailData();
  },

还有个问题，父级获取不到 el-table 有 fixed 属性的 expand 内组件的实例

因为 el-table 会渲染成多个，但实际只获取到其中一个，并且不一定是隐藏或者显示的

src/views/customer-service/pages/tasks/components/TableList.vue

<ElTable
  :data="tableData"
  row-key="id"
  class="linhuiba-margin-top-15"
  @expand-change="onExpand">
  <ElTableColumn type="expand" width="50px">
    <template slot-scope="{ row }">
      <TableListExpand
        ref="tableListExpand"
        :key="row.id"
        :task-relation-types="selection.task_relation_types"
        :task-id="row.id"
        :row="row"
      />
    </template>
  </ElTableColumn>
  <ElTableColumn fixed="right" label="操作" width="120px">
    <div slot-scope="{ row }" class="btn-box">
      <ElButton v-if="permissions.includes('工单编辑')" type="text" @click="edit(row.id)">
        编辑
      </ElButton>
    </div>
  </ElTableColumn>
</ElTable>

onExpand(row, expandedRows) {
  this.$nextTick(() => {
    console.log(this.$refs.tableListExpand);
  });
},

参考

Edited by liuyajun