element 表格内容变化，表格错行，如何解决呢？

Question

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

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

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

Answer 1

该回答引用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() 方法进行重绘，以确保表格可以正确显示。

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