解决el-table setCurrentRow会触发current-change函数问题
<template>
<template><el-tableref="singleTableRef":data="tableData"highlight-current-rowstyle="width: 100%"@current-change="handleCurrentChange"><el-table-column type="index" width="50"/><el-table-column property="date" label="Date" width="120"/><el-table-column property="name" label="Name" width="120"/><el-table-column property="address" label="Address"/></el-table>
</template><script setup>
import { ref, onMounted, nextTick } from 'vue';const data = [{ id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },{ id: 2, date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },{ id: 3, date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },{ id: 4, date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
];const singleTableRef = ref(null);
const tableData = ref([]);
const isUpdating = ref(false);
const setCurrent = (row) => {if (singleTableRef.value && !isUpdating.value) {nextTick(() => {isUpdating.value = true; singleTableRef.value.setCurrentRow(row); isUpdating.value = false; });}
};const handleCurrentChange = (val) => {if (isUpdating.value || !val) return; setTimeout(() => {const updatedData = [{ id: 1, date: '2016-05-03', name: '小王', address: 'No. 189, Grove St, Los Angeles' },{ id: 2, date: '2016-05-02', name: '小王', address: 'No. 189, Grove St, Los Angeles' },{ id: 3, date: '2016-05-04', name: '小王', address: 'No. 189, Grove St, Los Angeles' },{ id: 4, date: '2016-05-01', name: '小王', address: 'No. 189, Grove St, Los Angeles' }];tableData.value = updatedData; nextTick(() => {const currentRow = updatedData.find(item => item.id === val.id);if (currentRow) {setCurrent(currentRow);}});}, 1000);
};onMounted(() => {setTimeout(() => {tableData.value = data;nextTick(() => {setCurrent(data[1]);});}, 800);
});
</script>