Vue-elementUI树形控件的实现

需求：创建一个二级树形控件，并能模糊搜索

静态页面的展现

<div label="业务部件名称:" prop="compoName">
      <el-input v-model="filterdept" clearable readonly placeholder="请点击图标选择" @on-click="chooseCompoCode"/>
</div>
<!-- 选择compoCode -->
<Modal
    title="选择数据"
    v-model="compoModel"
    :mask-closable="false"
    :transfer="false"
    >
    <div class="modal-wrap">
      <el-tree
        ref="compoTree"
        :data="compoTree"
        :props="dataProps"
        @node-click="selectcompoNode"
        node-key="compoKey"
        :filter-node-mehod='filterSqlNode'
        >
      </el-tree>
    </div>
    <div slot="footer">
      <Button type="primary" @click="compoSure">确认选择</Button>
      <Button type="primary" @click="compoCancel">取消</Button>
    </div>
</Modal>

script实现

<script>
    treeUrl = 数据接口
    // 全局定义
    data () {
      return () {
      	filterdept: '',
        compoNode: null,// 用来存放选择出来的数据
        compoModel: false,
        compoTree: [], // 存放所有数据的数组
        defaultprops: {
            children: 'children',
            id: 'compoKey',
            label: 'label'
        }
      }
    }
    computed: {
        // 根据数据生成树形结构
        formTree () {
            return {
                Title: '树形'
                cells: [
                    {
                        type: 'tree',
                        label: '树形',
                        prop: '',
                        selectConfig: {
                            key: 'id',
                            data: this.sqlDatas,
                            checkbox: false,
                            dafaultProps: {label: 'dictTreeArr'},
                            nodeClick: this.selectcompoNode
                        }
                    }
                ]
            }
    	}
    },
    mounted: {
    	this.getCompoTreeFn () // 调用接口数据函数
    }
    watch: {
    	// 筛选，监听输入框的输入值
    	filterdept (val) {
            this.$refs.deptref.filter(val)
    	}
    },
    methods: {
    	// input框点击事件
      chooseCompoCode () {
        this.getCompoTree() // 获取树形控件接口
        this.compoNode = null // 用来存放选择出来的数据
        this.compoModel = true //树形控件弹窗
      },
      // 模糊搜索方法且不区分大小写
      filterSqlNode (value, data) {
      	if (!value) return true;
        return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1;
      },
      // 获取接口数据
      async getCompoTree() {
      	try {
            let res = await util.httpGet(treeUrl)
            this.sqlDatas = res.data
            let sqlDatas = this.sqlDatas
            // 遍历获取 tableName一级数据、tableColumns二级数据
            sqlData.forEach(item => {
                let children = []
                item.tableColumns.forEach(itemC => {
                    children.push({lable: itemC})
                })
                this.compoTree.push({lable: item.tableName, children: children})
            })
        } catch (error) {
            this.$message({message: error.message, type: 'warning'})
        },
        // 点击选中树形数据
        selectcompoNode (data, node, tree){
            this.compoNode = data
        }
    }
</script>