element 重新渲染表格

当使用element UI渲染一个表格时，我们有时需要在数据发生变化的情况下重新渲染表格，可以通过调用element UI提供的API实现。

首先，在Vue组件中，需要在data对象中定义表格需要用到的属性，例如columns、data等。当需要重新渲染表格时，我们需要手动更新data中的数据。更新完成后，调用element UI提供的this.$nextTick()方法来保证数据已经更新完成，然后调用this.$refs.table.$forceUpdate()方法来强制更新表格视图。

以一个简单的示例来演示：

<template>
<el-table ref="table" :data="tableData" :columns="tableColumns"></el-table>
<el-button @click="handleClick">重新渲染表格</el-button>
</template>

<script>
export default {
data() {
return {
tableColumns: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
}
],
tableData: [
{
name: '小明',
age: 18
},
{
name: '小红',
age: 20
}
]
}
},
methods: {
handleClick() {
// 更新表格数据
this.tableData.push({
name: '小花',
age: 22
})
// 强制更新表格视图
this.$nextTick(() => {
this.$refs.table.$forceUpdate()
})
}
}
}
</script>

在这个示例中，点击按钮会触发handleClick方法，在该方法中向tableData数组中添加一个新的数据项，并且使用this.$nextTick()保证数据已经更新完成，然后使用this.$refs.table.$forceUpdate()强制更新表格视图，完成表格的重新渲染。

需要注意的是，$forceUpdate()方法并没有重新请求数据的过程，只是强制更新表格的视图，如果需要重新请求数据进行重新渲染表格，还需要在updateData()方法中加入请求数据的代码。