前端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-input
                        v-model="deptName"
                        placeholder="请输入"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                        @input="handleTreeSearch"
                        @clear="handleTreeSearch"
                      />
                    </div>
                    <div
                      class="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-all
                        highlight-current
                        @node-click="handleNodeClick"
                      />
                    </div>
                  </el-col>
                </pane>
                <!--用户数据-->
                <pane size="84">
                  <el-col>
                    <el-table :data="comfortLevelList" max-height="260">
                      <el-table-column
                        align="center"
                        label="序号"
                        type="index"
                        width="50"
                      >
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="id"
                        prop="id"
                        v-if="false"
                      >
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="解脱点动画名称"
                        prop="animationName"
                      >
                      </el-table-column>
                      <el-table-column
                        align="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 映射到对应的树 ref
      const refMap = {
        first: "tree1", // 第一个Tab的树ref
        second: "tree2", // 第二个Tab的树ref
        third: "tree3", // 第三个Tab的树ref
        fourth: "tree4", // 第四个Tab的树ref
        fifth: "tree5", // 第五个Tab的树ref
        seventh: "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, // 维修任务id
        startTime: 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>