获取element中的tree的数据方法如下

有些时候我们需要右键出来一个增删改查的一个弹层，下面这个类似右键效果

<div class="custom-tree-container"> <div class="block"> <p>使用 render-content</p> <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> </div> <div class="block"> <p>使用 scoped slot</p> <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini" @click="() => append(data)"> Append </el-button> <el-button type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> </span> </span> </el-tree> </div> </div> <script> let id = 1000; export default { data() { const 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' }] }]; return { data: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)) } }, methods: { append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); }, renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}</span> <span> <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button> <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button> </span> </span>); } } }; </script> <style> .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } </style>

上面是element中的，然后自己项目中改版的

 <el-tree :data="dataTree" :props="defaultProps" @node-click="handleNodeClick">

            <span :title="node.label" class="custom-tree-node" slot-scope="{ node, data }">

              <span>{{ node.label }}</span>

              <el-dropdown trigger="click" @command="handleCommand">

                <span class="el-dropdown-link">

                    <i class="el-icon-edit edit"></i>

                </span>

                <el-dropdown-menu slot="dropdown">

                  <el-dropdown-item command="0" v-show="data.type===1">添加区域</el-dropdown-item>

                  <el-dropdown-item command="1" v-show="data.type===1">编辑区域</el-dropdown-item>

                  <el-dropdown-item command="2" v-show="data.type===1">删除区域</el-dropdown-item>

                  <el-dropdown-item command="3" v-show="data.type===1">添加仓库</el-dropdown-item>

                  <el-dropdown-item command="4" v-show="data.type===2">编辑仓库</el-dropdown-item>

                  <el-dropdown-item command="5" v-show="data.type===2">删除仓库</el-dropdown-item>

                </el-dropdown-menu>

              </el-dropdown>

            </span>

          </el-tree>
//css样式

 .custom-tree-node {

          flex: 1;

          display: flex;

          align-items: center;

          justify-content: space-between;

          font-size: 14px;

          width: 150px;

          padding-right: 8px;

        }

        .custom-tree-node span:nth-child(1) {

          width: 80%;

          overflow: hidden;

          text-overflow: ellipsis;

          white-space: nowrap;

        }

        .edit {

          display: none;

        }

        .custom-tree-node:hover .edit {

          display: block;

        }

最终效果图