el-tree可搜索單選

<div>
              <el-input placeholder="輸入關鍵字進行過濾" v-model="filterText"></el-input>
              <div class="tree mt10">
                <el-tree
                  :data="date"
                  show-checkbox
                  node-key="moduldCode"
                  ref="tree"
                  :check-strictly="false"
                  :highlight-current="true"
                  :check-on-click-node="true"
                  :accordion="true"
                  :default-checked-keys="[checkedkey]"
                  :default-expanded-keys="checkedkey"
                  :filter-node-method="filterNode"
                  :props="defaultProps"
                  :default-expand-all="true"
                  @check-change="parentModules"
                  @node-click="clickTree"
                ></el-tree>
              </div>
            </div>

<script>
// import { Req_getToken } from "@/api/user";

export default {
  name: "PersonManage",
  components: {},
  data() {
    return {
      filterText: "",
      date: [
        {
          moduldCode: 1,
          moduleName: "一級 2",
          disabled: true,
          child: [
            {
              moduldCode: 3,
              moduleName: "二級 2-1",
              disabled: true,
              child: [
                {
                  moduldCode: 4,
                  moduleName:
                    "三級 3-1-1ddddddddddddddddddddddddddddddddddddddd"
                },
                {
                  moduldCode: 5,
                  moduleName: "三級 3-1-2"
                }
              ]
            },
            {
              moduldCode: 2,
              moduleName: "二級 2-2",
              disabled: true,
              child: [
                {
                  moduldCode: 6,
                  moduleName: "三級 3-2-1"
                },
                {
                  moduldCode: 7,
                  moduleName: "三級 3-2-2"
                }
              ]
            }
          ]
        }
      ],
      checkedkey: [],
      defaultProps: {
        children: "child",
        label: "moduleName",
        id: "moduldCode" //可要可不要
      },
      // 取uniqueValue值的時候，列：uniqueValue[0]否則會是一個數組
      uniqueValue: "", //最后拿到的唯一選擇的moduldCode值,相當於id
      uniqueValueObj: "", //選中對象
      uniqueValueParent: "" //父節點
    };
  },
  created() {},
  mounted() {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.moduleName.indexOf(value) !== -1;
    },
    //節點選擇狀態發生改變時
    parentModules(data, checkbox, node) {
      if (checkbox) {
        // 后端返回的node-key不是id，是moduldCode
        this.$refs.tree.setCheckedKeys([data.moduldCode]);
        this.uniqueValue = this.$refs.tree.getCheckedKeys();
        this.uniqueValueObj = data;
        // console.log(data);
        // console.log(checkbox);
        // console.log( this.uniqueValue);
        // console.log(this.$refs.tree.getNodePath());
        // console.log(this.$refs.tree.getCurrentNode());
        //  console.log(this.$refs.tree.getCheckedNodes());
      } else {
        this.uniqueValue = this.$refs.tree.getCheckedKeys();
        if (this.uniqueValue.length == 0) {
          this.uniqueValue = "";
        }
      }
    },

    clickTree(v, e) {
      //   console.log(v.id);
      console.log(e);
      console.log(e.parent.data);
      if (e.checked) {
        this.uniqueValueParent = e.parent.data;
      }
    }
  }
};
</script>

<style  lang="scss"  scoped>
.select-person-inner {
  .inner-tem {
    float: left;
  }
  .inner-tem.inner-lf {
    width: 55%;
    padding-right: 20px;
    border-right: 1px solid #dcdfe6;
    .lf-contnent {
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      .lf-ct-header {
        border-bottom: 1px solid #dcdfe6;
        .lf-ct-header-item {
          width: 50%;
          height: 35px;
          float: left;
          line-height: 35px;
          box-sizing: border-box;
        }
        .lf-ct-header-item.item-lf {
          border-right: 1px solid #dcdfe6;
        }
      }
      .lf-ct-tree {
        padding: 10px;
      }
    }
  }
  .inner-tem.inner-rt {
    width: 45%;
    padding-left: 20px;
  }
}
.el-tree {
  min-width: 100%;
  display: inline-block;
}
.tree {
  //   overflow-y: auto;
  //   overflow-x: scroll;
  overflow: auto;
  max-height: 200px;
  /*width:200px;*/
  //   border: 1px solid blue;
}
</style>