el-table setCurrentRow会触发current-change函数 办理方案

办理el-table setCurrentRow会触发current-change函数题目

1. <template>
2. // 直接运行即可
3.   <template>
4.   <el-table
5.       ref="singleTableRef"
6.       :data="tableData"
7.       highlight-current-row
8.       style="width: 100%"
9.       @current-change="handleCurrentChange"
10.   >
11.     <el-table-column type="index" width="50"/>
12.     <el-table-column property="date" label="Date" width="120"/>
13.     <el-table-column property="name" label="Name" width="120"/>
14.     <el-table-column property="address" label="Address"/>
15.   </el-table>
16. </template>
18. <script setup>
19. import { ref, onMounted, nextTick } from 'vue';
21. const data = [
22.   { id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
23.   { id: 2, date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
24.   { id: 3, date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
25.   { id: 4, date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
26. ];
28. const singleTableRef = ref(null); // ref
29. const tableData = ref([]); // 表格数据
30. const isUpdating = ref(false); // 用于防止死循环的标识(重点)
32. // 高亮函数
33. const setCurrent = (row) => {
34.   if (singleTableRef.value && !isUpdating.value) {
35.     nextTick(() => {
36.       isUpdating.value = true; // 页面渲染完设置为true
37.       singleTableRef.value.setCurrentRow(row); // 执行高亮
38.       isUpdating.value = false; // 高亮之后设置为false(防止自执行current-change函数，如果不设置为false,那么就会去触发current-change函数)
39.     });
40.   }
41. };
43. const handleCurrentChange = (val) => {
44.   if (isUpdating.value || !val) return; // Prevent loop and handle null/undefined(防止循环和处理null/undefined)
46.   // Simulate async data update(模拟异步信息-)
47.   // setTimeout可以换做接口返回数据
48.   setTimeout(() => {
49.     const updatedData = [
50.       { id: 1, date: '2016-05-03', name: '小王', address: 'No. 189, Grove St, Los Angeles' },
51.       { id: 2, date: '2016-05-02', name: '小王', address: 'No. 189, Grove St, Los Angeles' },
52.       { id: 3, date: '2016-05-04', name: '小王', address: 'No. 189, Grove St, Los Angeles' },
53.       { id: 4, date: '2016-05-01', name: '小王', address: 'No. 189, Grove St, Los Angeles' }
54.     ];
56.     tableData.value = updatedData; // 用最新的数据或者深拷贝
58.     nextTick(() => {
59.       // find查找符合条件的
60.       const currentRow = updatedData.find(item => item.id === val.id);
61.       if (currentRow) {
62.         // 设置高亮
63.         setCurrent(currentRow);
64.       }
65.     });
66.   }, 1000);
67. };
69. onMounted(() => {
70.   // 这块设置默认选中一项
71.   setTimeout(() => {
72.     tableData.value = data;
73.     nextTick(() => {
74.       setCurrent(data[1]);
75.     });
76.   }, 800);
77. });
78. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。