vue使用element-ui创建多级菜单

1.代码是从项目直接搬下来的，其中的一些方法，你们可能用不到，一个el-table-column代表一列 ，第四个el-table-column中的一些v-if是用来判断每级创建不同的button按钮。

<!--当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。-->
            <!--通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。-->
            <el-table :data="dat" style="width: 100%;" :row-key="getRowKey"
                :tree-props="{ children: 'children', hasChildren: 'haschildren' }">
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column label="序号" prop="num">
                </el-table-column>
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column label="操作" width="400">
                    <template slot-scope="scope">
                        <template v-if="scope.row.tree == 1">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                @click="modify(scope.row.siteId, scope.row.name)">维护</el-button>
                            <el-button type="success" size="mini" icon="el-icon-plus"
                                @click="add(scope.row.siteId)">新增</el-button>
                        </template>
                        <template v-else-if="scope.row.tree == 2">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                @click="modifys(scope.row.transformerId, scope.row.siteId, scope.row)">维护</el-button>
                            <el-button type="success" size="mini" icon="el-icon-plus"
                                @click="adds(scope.row.transformerId)">新增</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete-solid"
                                @click="deleted(scope.row.transformerId)">删除</el-button>
                        </template>
                        <template v-else-if="scope.row.tree == 3">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                @click="modifysd(scope.row.lineId, scope.row.name)">维护</el-button>
                            <el-button type="success" size="mini" icon="el-icon-plus"
                                @click="addsd(scope.row.id, scope.row.name)">创建线路图</el-button>
                            <el-button size="mini" type="warning"
                                @click="fault(scope.row.id, scope.row.ctNum, scope.row.systemNum, scope.row.name)">计算故障</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete-solid"
                                @click="deletes(scope.row.lineId)">删除</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>

2.数据格式 很简单，:data='dat'为总数据，每个el-table-column中的prop代表每列的数据关键字，每层数据都要包含children,这样组件就会自动检测，继续往下层找相同的关键字。

 // 数据格式
      dat: {
        name: '临沂公司',
        num: '1',
        createTime:'2023-7-24',
        tree: 1,//根据这个关键字来判断每级创建不同的按钮
        children: [{
          name: '亚洲变电站',
          num: '1',
          createTime:'2023-7-24',
          tree: 2,//根据这个关键字来判断每级创建不同的按钮
          children: [{
            name: '太平洋线路',
            num: '1',
            createTime:'2023-7-24',
            tree: 3,//根据这个关键字来判断每级创建不同的按钮
          }]
        }]
      }