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,//根据这个关键字来判断每级创建不同的按钮
          }]
        }]
      }

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐