elementPlus treeselect相关问题

html 复制代码
    <el-tree-select
      placeholder="请选择业务代码"
      :props="{ label: 'transactionName', value: 'transactionCode' }"
      v-model="item.transactionCode"
      node-key="id"
      :data="transactionList"
      :default-expanded-keys="[item.transactionCode]"
      :default-checked-keys="[item.transactionCode]"
      :filter-node-method="filterNodeMethod"
      @node-click="(data) => addSelect(data, index)"
      style="width: 320px"
      filterable
      default-expand-all
      highlight-current
      check-strictly
    >
      <template #default="{ data }">
        {{ data.transactionName }}
        <span style="color: gray; text-align: right">{{ data.transactionCode }}</span>
      </template>
    </el-tree-select>
1、后端返回树形结构不是label、value解决方法如下:
html 复制代码
 :props="{ label: 'transactionName', value: 'transactionCode' }"
2、获取到当前选中项的label信息:

@node-click="(data) => addSelect(data, index)"

javascript 复制代码
  let addSelect = (data, index) => {
    formModel.transactionInfo[index].transactionName = data.transactionName
  }
3、编辑、详情页面数据子集回显问题
javascript 复制代码
     :default-expanded-keys="[item.transactionCode]"
     :default-checked-keys="[item.transactionCode]"
相关推荐
麦兜*16 分钟前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑26 分钟前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室1 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~1 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋1 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术2 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作2 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue