Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑

1. 在el-tree-select中change事件使用

如果直接传递row, 拿到的不是最新的row的数据, 使用$index结合tableData来拿row

1  <el-table-column prop="directory" label="所属目录树">
2            <template #default="scope">
3              <el-tree-select v-model="scope.row.areaTreeNodeId" :data="dirTreeData" placeholder="请选择"
4                popper-class="dircat-tree-select" @change="(val) => handleTreeChange(scope.$index, 'dir', val)"
5                @node-click="(node) => handleDirNodeClick(scope.row, node)" />
6            </template>
7          </el-table-column>

1// 处理树的变化（目录树或分类树）
2const handleTreeChange = async (index, treeType, value) => {
3  console.log(index, treeType, value, 'rowhandleTreeChange目录树');
4  let row = tableData.value[index]
5  console.log(row, 'row>>>');
6  if (!row) return ElMessage.error('无法获取表格行数据')
7  if (value && row.dataId) {
8    const treeData = {
9      relatedId: row?.relatedId?.toString(), // 关联id
10      sceneId: commonStore.sceneId, // 场景id
11      areaTreeNodeId: treeType == 'dir' ? value : row.areaTreeNodeId, // 区域树节点id
12      areaTreeNodeName: treeType == 'dir' ? row.dirNode?.label : row.areaTreeNodeName, // 区域树节点名称
13      classifyTreeNodeId: treeType == 'cat' ? value : row.classifyTreeNodeId, // 分类树节点id
14      classifyTreeNodeName: treeType == 'cat' ? row.catNode?.label : row.classifyTreeNodeName, // 分类树节点名称
15      dataId: row.dataId // 数据dataId
16    }
17    try {
18      const res = await batchAddSceneDataRelation([treeData])
19      if (res.code == 200) {
20        ElMessage.success([`${treeType === 'dir' ? '目录' : '分类'}树绑定成功`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.dir.md))
21      } else {
22        ElMessage.error([`${treeType === 'dir' ? '目录' : '分类'}树绑定失败`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.dir.md))
23      }
24    } catch (error) {
25      ElMessage.error([`${treeType === 'dir' ? '目录' : '分类'}树绑定失败`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.dir.md))
26    }
27  }
28  getDataList()
29}

《Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑》是转载文章，点击查看原文。