vue+ele 爬坑之路(二)—tree

后台管理系统中Tree的使用

 因为涉及到权限的分配，所以要有v-if判断，初始的情况，我一直想在script中直接获取到node里面的值，但是我试了element文档中许多办法，都无法直接获取，需要的都是通过事件，但我后面加了个aaa()click事件，发现我可以点击后打印出node和data,于是反向思维直接试着获取node里面的值，结果就成功了，也算可喜可贺吧！
使用方法为：

<div class="main-content">
                    <el-tree
                            :data="treeLeft"
                            node-key="id"
                            default-expand-all
                            @node-click="handleNodeClick"
                            :props="defaultProps"
                            :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span @click="() => aaa(node,data)">{{node.label}}</span>
                            <span style="margin-left: 15px">
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="() => appendTree(node,data)">新增
                                </el-button>
                                <template v-if="node.level!==1">
 //node.level可直接获取，通过计算node.level的值可以控制功能按钮的显示,每个树节点node里面的level都是唯一的
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => treeEdit(node,data)">修改
                                    </el-button>
                                    <template v-if="data.children.length===0">
 //data.children可直接获取，通过计算当前节点是否有children，可选择功能按钮是否显示，但是length这个属性在没有获取到树的数据的时候使用会有一些报错，这个大家可以不用在意
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => treeDelete(node,data)">删除
                                    </el-button>
                                     </template>
                                </template>
                            </span>
                        </span>
                    </el-tree>
                </div>

在script中

<script>
 export default {
methods:{
 //新增组织机构树
            appendTree: function (node, data) {
                this.deptVisible = true //我这里的通过弹窗来对组织机构树进行修改的
                this.deptTitle = '新增组织机构'
                this.dept.deptFullName = data.label;
                this.dept.preDept.deptId = data.id
                // this.dept.parentId=node.parent.data.id
                this.dept.dLevel = node.level
            },
            //新增组织机构树--保存
            deptSave: function () {
                this.$refs.dept.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            if(this.previewUrl==''){
                                this.deptSubmit();
                            }else{
                                this.$refs.upload.submit();
                            }
                        })
                    }
                })
            },
}
}
</script>

这个就是tree组件的一些使用了，欢迎大家提出建议。
更多文档请移步：http://element-cn.eleme.io/#/zh-CN/component/tree