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

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

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

javascript 复制代码
  <el-table-column prop="directory" label="所属目录树">
            <template #default="scope">
              <el-tree-select v-model="scope.row.areaTreeNodeId" :data="dirTreeData" placeholder="请选择"
                popper-class="dircat-tree-select" @change="(val) => handleTreeChange(scope.$index, 'dir', val)"
                @node-click="(node) => handleDirNodeClick(scope.row, node)" />
            </template>
          </el-table-column>
javascript 复制代码
// 处理树的变化(目录树或分类树)
const handleTreeChange = async (index, treeType, value) => {
  console.log(index, treeType, value, 'rowhandleTreeChange目录树');
  let row = tableData.value[index]
  console.log(row, 'row>>>');
  if (!row) return ElMessage.error('无法获取表格行数据')
  if (value && row.dataId) {
    const treeData = {
      relatedId: row?.relatedId?.toString(), // 关联id
      sceneId: commonStore.sceneId, // 场景id
      areaTreeNodeId: treeType == 'dir' ? value : row.areaTreeNodeId, // 区域树节点id
      areaTreeNodeName: treeType == 'dir' ? row.dirNode?.label : row.areaTreeNodeName, // 区域树节点名称
      classifyTreeNodeId: treeType == 'cat' ? value : row.classifyTreeNodeId, // 分类树节点id
      classifyTreeNodeName: treeType == 'cat' ? row.catNode?.label : row.classifyTreeNodeName, // 分类树节点名称
      dataId: row.dataId // 数据dataId
    }
    try {
      const res = await batchAddSceneDataRelation([treeData])
      if (res.code == 200) {
        ElMessage.success(`${treeType === 'dir' ? '目录' : '分类'}树绑定成功`)
      } else {
        ElMessage.error(`${treeType === 'dir' ? '目录' : '分类'}树绑定失败`)
      }
    } catch (error) {
      ElMessage.error(`${treeType === 'dir' ? '目录' : '分类'}树绑定失败`)
    }
  }
  getDataList()
}
相关推荐
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长9 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH9 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据10 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年11 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una11 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年12 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js12 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ13 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办13 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js