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