Vue2+ElementUI el-table初始化时定位并高亮指定行

在Vue2和ElementUI中，你可以使用ref属性来引用el-table组件，并使用ElementUI的Table组件的方法来定位并高亮指定行。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    ref="myTable"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }],
      currentRow: null,
    };
  },
  mounted() {
    this.highlightRow(2); // 假设你想高亮第三行，索引从0开始
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    highlightRow(index) {
      this.$nextTick(() => {
        const row = this.tableData[index];
        if (row) {
          this.$refs.myTable.setCurrentRow(row);
        }
      });
    },
  },
};
</script>

在这个例子中，highlight-current-row 属性用于开启高亮当前行的功能。@current-change 事件用于监听当前高亮行的变化。handleCurrentChange 方法用于更新currentRow数据，这个数据可以用于其他逻辑。highlightRow 方法通过ref引用el-table并使用setCurrentRow方法来设置高亮的行。

请注意，highlightRow方法中的this.$nextTick是用于确保DOM已经更新完成后才设置当前行，以避免一些潜在的渲染问题。