前端tree树

1、效果

2、heml代码

 <splitpanes:horizontal="this.$store.getters.device === 'mobile'"class="default-theme"><!--拆装序列列表获取--><pane size="20"><el-col><div class="head-container" style="margin-top: 10px"><el-inputv-model="deptName"placeholder="请输入"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"@input="handleTreeSearch"@clear="handleTreeSearch"/></div><divclass="head-container"style="max-height: 260px; overflow-y: auto"><el-tree:data="deptOptions":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree1"node-key="taskId"default-expand-allhighlight-current@node-click="handleNodeClick"/></div></el-col></pane><!--用户数据--><pane size="84"><el-col><el-table :data="comfortLevelList" max-height="260"><el-table-columnalign="center"label="序号"type="index"width="50"></el-table-column><el-table-columnalign="center"label="id"prop="id"v-if="false"></el-table-column><el-table-columnalign="center"label="解脱点动画名称"prop="animationName"></el-table-column><el-table-columnalign="center"label="量化值"prop="quantizedValue"></el-table-column><el-table-column align="center" label="等级" prop="grade"></el-table-column></el-table></el-col></pane></splitpanes>

3、js代码

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {components: { Treeselect, Splitpanes, Pane },data() {return {deptOptions: [// {//   taskId: 1,//   startTime: "时间",// },// {//   taskId: 2,//   startTime: "时间1",// },],// 拆装序列列表获取deptName: undefined,defaultProps: {children: "children",label: "startTime",},}}
}methods: {/**@Author: *@Date: 2025-10-22 16:14:45*@Description: 树搜索触发方法（根据当前Tab选择对应树实例）*/handleTreeSearch() {// 根据 activeName 映射到对应的树 refconst refMap = {first: "tree1", // 第一个Tab的树refsecond: "tree2", // 第二个Tab的树refthird: "tree3", // 第三个Tab的树reffourth: "tree4", // 第四个Tab的树reffifth: "tree5", // 第五个Tab的树refseventh: "tree7", // 第六个Tab的树ref（对应name="seventh"）};// 获取当前Tab对应的树实例const treeRef = refMap[this.activeName];const treeInstance = this.$refs[treeRef];// 若树实例存在，调用filter方法if (treeInstance) {treeInstance.filter(this.deptName);}},/**@Author: *@Date: 2025-10-16 13:37:04*@Description: 筛选节点*/filterNode(value, data) {if (!value) return true;return data.startTime.indexOf(value) !== -1;},/**@Author: *@Date: 2025-10-16 13:37:41*@Description: 基于关节位移维修舒适性评估点击左侧树时间获取右侧评估内容*/handleNodeClick(row) {console.log("点击了树", row);let data = {id: this.rowID,taskName: this.taskName,assessType: this.assessType,taskId: row.taskId, // 维修任务idstartTime: row.startTime, // 评估id};console.log(data);// 调用维修舒适度综合评估new QWebChannel(qt.webChannelTransport, (channel) => {var content = channel.objects.content;//接收信号content.signal_Get_assess_result.connect((data) => {let res = JSON.parse(data);if (res.code == 200) {this.comfortLevelList = res.data;} else {this.$message.error(res.message);}});content.slot_Get_assess_result(JSON.stringify(data));});},},
</script>