Element-ui table 分页后，el-tooltip失效 Vue

在Element UI的Table组件中使用分页后，el-tooltip组件可能会失效，这是因为分页操作会导致表格的数据重新渲染，从而可能会影响到工具提示的正常显示。

要解决这个问题，可以使用key属性在el-table-column上强制Vue重新渲染每一行。这可以通过为每行绑定一个唯一的key值来实现。

以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      :key="Math.random()"
    >
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">{{ scope.row.date }}</div>
          <span>{{ scope.row.date }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
    };
  },
  methods: {
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新加载数据
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val;
      // 重新加载数据
    },
    // 加载数据的方法
    loadData() {
      // 假设fetchData是一个API请求，用来获取表格数据
      fetchData(this.currentPage, this.pageSize).then(response => {
        this.tableData = response.data;
        this.total = response.total;
      });
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

在这个示例中，我们为el-table-column绑定了一个key属性，其值为一个通过调用Math.random()生成的随机数。这确保了每一行都有一个唯一的key值，从而在分页操作后，Vue可以正确地重新渲染每一行，el-tooltip组件也因此能够正常工作。

请注意，这个解决方案并不是性能最优的，因为它会在每次分页时重新渲染所有行。如果表格数据量很大，可以考虑其他的优化方案，比如虚拟滚动或者使用v-if代替v-for来渲染元素。