element ui中自定义树形控件

树形控件，原有的形式也许不能满足用户需求，需要自定义

 <el-tree :data="title" node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps2">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                                <el-button type="text" size="mini" @click="addNodeRight(data)" v-show="data.type == 1" style="padding:0">
                                [添加子节点]
                                </el-button>
                                <el-button type="text" size="mini" @click="editNode(node, data)" style="padding:0">
                                [编辑节点]
                                </el-button>
                                <el-button type="text" size="mini" @click="remove(data)" style="padding:0">
                                [删除节点]
                                </el-button>
                           </span>
                        </span>
                    </el-tree>

上面代码可以实现出下图效果

1534323430(1).png