vue+element tree(树形控件)组件

Posted 2020-12-28 dongyuxin

今天记录组件的代码和一个调用它的父组件的代码，接口接收数据直接传element直接能用的，也就是经过上一章函数处理过的数据以下是代码

父组件

<template>
    <commonfiltertree :placeholder="placeholder"
        :data="data"
        :showCheckbox="showCheckbox"
        @check=‘getcheckdata‘
        :title="title"
        :showScreen="showScreen"
        @click=‘getCurrentKey‘
        @checkkey=‘getCheckedKeys‘
        :defaultExpandAll="defaultExpandAll"
        :default=‘defaults‘></commonfiltertree>
</template>
<script>
import commonfiltertree from "@/components/newCommon/tree/filtertree.vue";
export default {
    components: {
        commonfiltertree
    },
    data() {
        return {
            placeholder: ‘输入信息，按回车搜索‘,
            showCheckbox: true,
            data: [{
                id: 1,
                label: ‘一级 1‘,
                children: [{
                    id: 4,
                    label: ‘二级 1-1‘,
                    children: [{
                        id: 9,
                        label: ‘三级 1-1-1‘
                    }, {
                        id: 10,
                        label: ‘三级 1-1-2‘
                    }]
                }]
            }, {
                id: 2,
                label: ‘一级 2‘,
                children: [{
                    id: 5,
                    label: ‘二级 2-1‘
                }, {
                    id: 6,
                    label: ‘二级 2-2‘
                }]
            }, {
                id: 3,
                label: ‘一级 3‘,
                children: [{
                    id: 7,
                    label: ‘二级 3-1‘
                }, {
                    id: 8,
                    label: ‘二级 3-2‘
                }]
            }],
            countent: "",
            defaultProps: {
                children: "children",
                label: "label"
            },
            data1: new Array,
            data2: "",
            title: "水费电费水电费",
            showScreen: true,
            defaults: [],
            defaultExpandAll:true
            
        };
    },
    methods: {
        getcheckdata(data) {
            //有多选框的时候返回的data数组
            this.data1 = data;
        },
        getCurrentKey(data) {
            //点击的时候返回当前点击的key
            this.data2 = data;
        },
        getCheckedKeys(data) {
            //有多选框时返回的key所组成的数组
            this.data3 = data;
        }
    }
};
</script>

子组件

/*
* @property { data :  {Array} 接口传来的数组 }
* @property { showCheckbox :  {Boolean} 是否显示多选小方框 }
* @property { placeholder :  {String} 提示语，上方搜索框提示语。 }
* @property { check : 父组件使用check来接收已选中的所有数据组成的数组 }
* @property { title : {String} 弹窗上方的名字 }
* @property { showScreen : {Boolean} 是否需要筛选框 }
* @property { nodeclick : 节点被点击时的回调 }
* @property { defaults : {Array} 默认选中的数据 传key组成的数组 }
* @property { defaultExpandAll : {Boolean} 是否默认展开 }
* @version 1.0.0
* @edit: 2018/8/2
*/
<template>
    <div class="air-tree-wrappers">
            <div class="el-dialog__title">{{ this.title }}</div>
        <div v-if="screen">
            <el-input class="input"
                :placeholder="placeholder"
                prefix-icon="el-icon-search"
                v-model="filterText"
            >
            </el-input>
        </div>
        <el-tree class="filter-tree"
            :data="data"
            :props="defaultProps"
            :show-checkbox="checkbox"
            :default-expand-all="defaultExpandAll"
            :filter-node-method="filterNode"
            @check-change=‘check()‘
            ref="tree"
            :node-key="‘id‘"
            @node-click="nodeclick">
        </el-tree>
        <div class="foot">
        </div>
    </div>
</template>
<script>
export default {
    props: {
        placeholder: {
            type: String
        },
        data: {
            type: Array
        },
        default: {
            type: Array
        },
        showCheckbox: {
            type: Boolean
        },
        width: {
            type: String
        },
        title: {
            type: String
        },
        showScreen: {
            type: Boolean
        },
        defaultExpandAll: {
            type: Boolean,
        }
    },
    data() {
        return {
            filterText: ‘‘,
            countent: "",
            checkbox: this.showCheckbox,
            defaultProps: {
                children: "children",
                label: "label",
            },
            data1: new Array,
            dialogTableVisible: false,
            screen: this.showScreen
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //传回父组件
        check() {
            //获取所有被选中的data的数组
            let takeDate = this.$refs.tree.getCheckedNodes();
            this.$emit(‘check‘, takeDate);
            //获取所有被选中的key的数组
            let keyDate = this.$refs.tree.getCheckedKeys();
            this.$emit(‘checkkey‘, keyDate);
        },
        nodeclick() {
            let key = this.$refs.tree.getCurrentKey()
            this.$emit(‘click‘, key);
        }
    }
};
</script>

里面用的事件都是element封好的直接用就好了比如

更多的事件，属性直接去element官网找就好了。

this.$nextTick(()=>{}) 这个方法的作用是 DOM更新完成后执行

应该就相当于一个延时函数，很有用，有时你的函数触发的时候dom还没加载出来比如使用$ref时候就会发生这种情况。