当前位置：首页 > news >正文

Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

news 来源：原创 2025/5/20 2:29:16

效果：

DOM部分： // 设置el-option隐藏的下拉选项，选项显示的是汉字label，值是value // 如果不设置一个下拉选项，下面的树形组件将无法正常使用

<el-form-item label="报警区域" prop="monitorId">
        <el-select ref="selectUpResId" v-model="queryParams.labelName" placeholder="请选择报警区域" class="treeselect-main">
 // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
      // 如果不设置一个下拉选项，下面的树形组件将无法正常使用
          <el-option hidden :key="queryParams.monitorId" :value="queryParams.monitorId"
            :label="queryParams.labelName"></el-option>
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"
            @node-click="handleNodeClick"  :highlight-current="true" :current-node-key="currentKey">
          </el-tree>
        </el-select>
      </el-form-item>

js部分：

:highlight-current="true" :current-node-key="currentKey"开启高亮当前节点的功能

this.deptOptions格式为数组嵌套数组：例如

 data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 11,
          name: '二级 1-1',
          children: [{
            id: 111,
            name: '三级 1-1-1'
          }]
        }]
      }],

data({

   // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pushType: null,
        pushTime: null,
        level: null,
        status: null,
        monitorId: null, //绑定的id
        labelName: '' //用于回显的label文字
      },
//下拉款结构
 defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
)
 created() {
   
    this.getMonitorTree() //初始化获取tree下拉框
  },
  methods: {
   /** 获取监控区域下拉树结构 */
    getMonitorTree() {
      monitorTreeSelect().then((response) => {
      
        response.data.forEach(item => {
          this.deptOptions.push({
            id: item.id,
            label: item.label,
            children: item.children,
          })

        });
      })
    },
//选中需要绑定的id，赋值给 this.queryParams.monitorId
  handleNodeClick(data) {
      this.queryParams.labelName = data.label
      this.queryParams.monitorId = data.id
      this.$refs.selectUpResId.blur()  //选中后隐藏下拉框
    }
}