vue+element tree(樹形控件)組件(2)

今天記錄組件的代碼和一個調用它的父組件的代碼，接口接收數據直接傳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時候就會發生這種情況。