element select改成成tree树状下拉

在这里插入图片描述

<template>
 <el-select 
    class="jhx-formData-inputRow" 
    ref="configSelect" 
    v-model="orgName" 
    filterable 
    placeholder="请选择"
    :filter-method="filterMethod" 
    clear>
     <el-option :label="orgValue.label" :value="orgValue.value" style="height: auto; display: none">
     </el-option>
      <el-input placeholder="输入关键字进行过滤" style="width:92%;margin-left:3%;margin-top:10px" v-model="filterText">
      </el-input>
       <el-tree ref="orgTree" :data="orgList" :props="orgDefaultProps" @node-click="handleorgDodeClick"
       :filter-node-method="orgFilterNode" :default-expand-all="true">
        </el-tree>
     </el-select>
</template>
export default{
  data(){
      return{
	      filterText: '',
	      orgName: '',
	      orgList: [
	         {
	          name:'测试1',
	          id:1,
	          children:[]
	        }
          ],
           orgValue: {},
           orgDefaultProps: {
	        children: "children",
	        label: "name",
	      },
	       ruleForm: {
	        orgId: ""
	      },
     } 
   },
    watch: {
    filterText(val) {
      console.log(val)
      this.$refs.orgTree.filter(val);
    }
  },
  methods:{
  // tree搜索
    orgFilterNode(value, data) {
      if (!value) return true;
      return data.codeName.indexOf(value) !== -1;
    },
    // 机构tree点击事件
    handleorgDodeClick(val) {
      let { id, name } = val
      this.orgValue.label = name
      this.orgValue.value = id
      this.ruleForm.orgId = id
      this.orgName = name
      // 点击数点击关闭tree下拉框
      this.$refs.configSelect.blur();
    },
    // 监听打开窗口给对应的数据赋值
    dialogOpen(){
     let orgList = this.treeToFlat(JSON.parse(JSON.stringify(this.orgList)))
        this.orgName = orgList.find(item => item.id=== this.ruleForm.orgId).name
        this.orgValue = {
          label: orgList.find(item => item.id === this.ruleForm.orgId).name,
          value: orgList.find(item => item.id === this.ruleForm.orgId).id
        }
    },
    // 树形数据扁平化
    treeToFlat(data) {
      let ary = [];
      data.forEach((item) => {
        if (item.children) {
          ary.push(item);
          if (item.children.length > 0) {
            ary.push(...this.treeToFlat(item.children));
          }
        } else {
          ary.push(item);
        }
        delete item.children;
      });
      return ary;
    },
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力让自己的选择变得正确

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值