当用户点击input输入框时显示树形数据供用户选择

1. 在表格引用tree组件

<el-form-item label="上级菜单" >
 <div v-if="!selectBtn">
    <el-popover style="width: 100%;" placement="bottom-start" trigger="focus">
      <el-input :disabled="selectBtn" readonly style="font-size: 16px;font-weight: bold;color: #8c939d" placeholder="主目录" v-model="parentName" slot="reference"></el-input>
      <div style="width: 300px;height: 200px;overflow: auto;">
        <el-tree :data="tableData" ref="tree" :props="defaultProps" node-key="id" show-checkbox check-strictly
            :expand-on-click-node='false' @check-change="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span :class="data.icon">  {{data.name}}</span>
          </span>
        </el-tree>
      </div>
    </el-popover>
  </div>
  <div v-else>
    <el-input disabled v-model="form.parentName" style="width: 100%;font-size: 16px;font-weight: bold;"></el-input>
  </div>
</el-form-item>

2. 引入属性和方法

<script>
export default {
  name: "Menu",
  data(){
    return {
      tableData: [],
      form: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      parentName:'',
      selectBtn: false,  // 一级菜单没有根目录
      selectList: []
    }
  },
  methods: {
  	//  编辑按钮
    editMenu(row){
      this.selectBtn = false
      this.selectList = []
      this.parentName = row.parentName
      // 如果没有上级菜单,禁止用户选择
      if (row.parentName === '无'){
        this.selectBtn = true
      }else {
        // 回显上级菜单
        let _this = this;
        _this.selectList.push(row.pid)
        _this.$data.thisRefTree = setInterval(() =>{
          _this.selectList.forEach((i) => {
            let node = _this.$refs.tree.getNode(i);
            _this.$refs.tree.setChecked(node, true);
          });
          clearInterval(_this.$data.thisRefTree)
        },200)
      }
      this.form = {...row}  // 深拷贝,防止编辑时还没保存,前端页面数据发生改变
      this.dialogFormVisible = true
    },
    // 当用户勾选菜单时触发事件
    handleNodeClick (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data])
        this.parentName = data.name
        this.form.pid = data.id
      }
    },
  }
}
</script>

3. tableData 返回的数据格式



效果如下：