el-select和el-tree联动实现下拉框展示树结构

最新推荐文章于 2024-06-04 14:09:20 发布

仲夏夜的猫ʚɞ

最新推荐文章于 2024-06-04 14:09:20 发布

阅读量752

点赞数 7

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/dongbc0812/article/details/135839601

版权

项目上遇到需要在下拉框展示树结构以供选择的情况，在实现的过程中出现下拉树选中不回填、添加时回填但编辑时不回填、必填校验一直存在等坑，现总结最终方案如下：

父组件

html部分

<el-form-item label="所属机构" prop="orgName">
  <el-select ref="belongSelect" style="width:100%" v-model="dialogForm.orgName" placeholder="请选择所属机构">
     <el-option :value="dialogForm.orgName" :label="dialogForm.orgName" hidden>
     </el-option>
       <CheckTree @tClick="handleNodeClickBelong"></CheckTree>
   </el-select>
</el-form-item>

js部分

data() {
    return {
      dialogForm: {
        orgName: '',
      },
      rules: {
        orgName: [
          { required: true, message: '请选择所属机构', trigger: 'change' }
        ]
      }
    }
  },
  methods：{
  handleNodeClickBelong(data) {
      this.dialogForm.orgId = data.id
      this.dialogForm.orgName = data.orgName
      this.$refs.belongSelect.blur()
    },
  }

子组件

<template>
  <div>
    <el-tree :node-key="defaultProps.value" v-loading="loading" highlight-current class="filter-tree" :data="treeData" :props="defaultProps"  @node-click="handleNodeClick" ref="tree" :default-expand-all="istrue">
    </el-tree>
  </div>
</template>

<script>
import { reqGetOrgDirtory } from '@/api/role-manage'
export default {
  name: 'CheckTree',
  data() {
    return {
      loading: true,
      defaultProps: {
        value: "id",
        label: "orgName",
        children: "child",
      },
      treeData: [],
    };
  },
  created() {
    this.getOrgDirtory()
  },
  methods: {
    async getOrgDirtory() {
      await reqGetOrgDirtory().then(res => {
        if (res.data.code == 200) {
          this.treeData = res.data.obj
          this.loading = false
        }
      })
    },
    async handleNodeClick(data, node, event) {
        this.$emit('tClick', data)
    },
  },
}
</script>