element 表格内容变化,表格错行,如何解决呢?

图片说明
使用了element-ui的上传组件,上传后表格td能正常撑开,点击删除后表格无法正常回去,样式错乱

ts:曾尝试在表格中动态显示一些按钮,表格收缩正常,唯独用了这个上传组件的增删表格就无法正常渲染。。。表格的dolayout也已经尝试使用过,并没有什么用。

跪求有经历的朋友能够帮忙指点下!

该回答引用GPTᴼᴾᴱᴺᴬᴵ
这种问题一般是由于表格中的内容变化后,未能及时触发表格组件的 doLayout() 方法,从而导致表格错行。为了解决这个问题,建议在表格内容变化后手动调用 doLayout() 方法进行重绘。

具体地,可以在表格组件的 @row-update 事件中,调用 doLayout() 方法进行重绘。该事件会在表格的行数据变化时触发,可以用于监听表格内容的动态更新。

以下是一个示例代码:

<template>
  <el-table :data="tableData" @row-update="handleRowUpdate">
    <!-- 表格列的定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    }
  },
  methods: {
    handleRowUpdate(oldRow, newRow) {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    }
  }
}
</script>

在上述代码中,我们在表格组件的 @row-update 事件中调用了 handleRowUpdate 方法。在该方法中,我们使用了 $nextTick 方法来保证在表格数据变化之后进行重绘,避免不必要的渲染。在 $nextTick 回调中,我们手动调用了 doLayout() 方法进行重绘,以确保表格可以正确显示。

希望这些信息能够对你有所帮助。