Vue Eelement-UI 组件二次封装（五）：Tree 树形控件

查看此文前应看： https://blog.csdn.net/qq_33991007/article/details/108384277

封装组件：

<template lang="html">
    <div class="">
        <el-tree :data="factoryOptions"
                 :props="defaultProps"
                 :default-expand-all="dea"
                 :highlight-current="highlightCurrent"
                 node-key="value"
                 :expand-on-click-node="eocn"
                 @node-click="handleNodeClick">
            <span class="span-ellipsis" slot-scope="{node,data}">
                <span :title="node.label">{{node.label}}</span>
            </span>
        </el-tree>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                dea:true,
                eocn:false,
            }
        },
        props: {
			highlightCurrent: {
				default: false
			}
		},
        computed:{
            factoryOptions(){
                return this.$attrs.dataList || []
            }
        },
        methods:{
            handleNodeClick(data, node){
                this.$emit('changeNode', {data:data,node:node})
            }
        }
    }
</script>

<style lang="css" scoped>
    .span-ellipsis {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*display: block;*/
    }
</style>

全局调用：

<new-tree :dataList="factoryList" @changeNode="changeFactory" :highlightCurrent="true"></new-tree>

其中参数如下：

       data(){
            return {
                factoryList: [],
            }
        },
        methods:{
            changeFactory(val){
            // 此部分val可读取很多内容，具体看调用
            }
        }