element-ui的form表单里面写树形组件

最新推荐文章于 2024-10-09 17:49:21 发布

清幽子

最新推荐文章于 2024-10-09 17:49:21 发布

阅读量2k

点赞数 2

分类专栏：项目运行文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_45489665/article/details/123536137

版权

项目运行专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue项目中，利用El-Input和El-Popover组件结合，实现点击输入框弹出树形组件选择功能。通过绑定数据和事件处理，实现在选择树形节点后自动填充输入框并关闭弹框。核心代码包括El-Tree的配置和方法如getPartyList、deptListTreeCurrentChangeHandle等。

摘要由CSDN通过智能技术生成

在这里插入图片描述
功能就是form表单，点击el-input输入框，弹出属性组件，点击选择一个树形组件

首先树形组件需要写在弹出框里

代码如下：

<el-form-item>
       <el-popover
         :disabled='false'  
         v-model="deptListVisible"
         placement="bottom-start"      
         ref="deptListPopover"
         trigger="click"         
         style="min-width: 100%"
       >
           <el-tree
             :data="partyList"
             :default-expand-all="true"    
             show-checkbox
             :check-on-click-node="true"
             :props="{ label: 'name', children: 'children' }"
             node-key="id"
             ref="deptListTree"
             :highlight-current="true"
             :expand-on-click-node="false"
             accordion
             @check="deptListTreeCurrentChangeHandle">
           </el-tree>
       </el-popover>
       <el-input
         v-model="form.deptName"
         placeholder="所属组织" 
       
         ref="deptInput"
         @focus="showPopover"
       >
       </el-input>
</el-form-item>

data里面需要声名的变量：

	form: {
        deptId: "",
        deptName: "", //所属组织
      },
      // 树形结构弹框显隐
      deptListVisible: false,

方法

  created() {
        this.getPartyList()
       
      },
    methods: {
        // 获取数据
        getPartyList() {
            return this.$http.get(`/sys/dept/list`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                
                this.partyList = this.addAttr(res.data)
                //默认折叠左侧树三级菜单
                this.partyList.forEach(m => {
                    this.idArr.push(m.id)
                })
            }).catch(() => { })
        },
        addAttr(data) {
            for (var j = 0; j < data.length; j++) {
                if (data[j].type == 0) {
                }
                if (data[j].type == 1) {
                    data[j].expanded = true
                }
            }
          
            return data
        },
        // 点击选择一个节点
	     deptListTreeCurrentChangeHandle(data) {
	      this.$refs.deptListTree.setCheckedNodes([]);
	      this.$refs.deptListTree.setCheckedNodes([data]);
	
	      this.form.deptId = data.id;
	      this.form.deptName = data.name;
	      this.deptListVisible = false; //气泡弹框隐藏
	    },
	    // 点击输入框， 显示弹框
	    showPopover() {
	      this.deptListVisible = true;
	    },
    }