vue 树形下拉框 多选 封装组件及应用

效果: 

调用：

import TreeSelect from "@/utils/components/tree-select.vue";
export default {
  name: "test",
  components: { TreeSelect },
  data() {
    return { 
        // 清空树形选择框数据
        clearTreeSelect: 0,
        defaultProps: {
           children: "childrenList",
           label: "menuName"
        },
        nodeKey: "menuId",
        defaultCheckedKeys: [],

页面

methods: 

popoverHide(checkedIds, checkedData) {
      this.carList = [];
      if (checkedData != undefined && checkedData != null) {
        checkedData.forEach(item => {
          if (item.childrenList == undefined || item.childrenList == null) {
            this.carList.push(item.menuId);
          }
        });
      }
    },

// 重置
    resetQuery() {
      this.queryParams = {
        date: undefined,
        beginDate: undefined,
        endDate: undefined,
        pageNum: 1,
        pageSize: 10
      };
      // 子组件监听到数据的变化后会将子组件中的数据清空
      this.clearTreeSelect = this.clearTreeSelect + 1;
      this.getList();
    },

还有啥需要扩展的功能，和优化的。