// 初次渲染只加载一级,点击展开下级图标,再根据一次某参数,去查询二级的数据
<el-table
:default-expand-all="isExpandAll"
v-loading="loading"
:data="inventoryList"
row-key="contListNo"
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="contListNo" label="清单编号" min-width="160" />
<el-table-column prop="contListCn" label="清单名称" min-width="160" align="center" />
<el-table-column prop="unit" label="单位" min-width="160" align="center" />
<el-table-column prop="contPrice" label="合同单价(元)" min-width="160" align="center" />
<el-table-column prop="contCount" label="合同数量" min-width="100" align="center" />
<el-table-column label="合同金额(元)" align="center" prop="contAmount" min-width="100"/>
<el-table-column label="操作" align="center" min-width="150">
<template slot-scope="scope">
<el-button
type="text"
@click="handleView(scope.row.contListId, scope.row.id)"
>查看</el-button>
<el-button
type="text"
@click="handleUpdate(scope.row.contListId, scope.row.id)"
>编辑</el-button>
<el-button
v-if="scope.row.id"
type="text"
class="danger"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
data() {
return {
// 是否展开,默认全部折叠
isExpandAll: false,
// 遮罩层
loading: true,
// 菜单表格树数据
inventoryList: []
}
}
/** 查询列表 */
getList() {
this.loading = true
getGclHtqdList(this.listQuery).then(response => {
this.inventoryList = response.data
this.inventoryList.forEach(item => {
// 必要设置,不然没有下级图标
item.hasChildren = true
item.children = null
})
this.loading = false
})
},
// 在这里调接口查下一级数据就好了
load(tree, treeNode, resolve) {
const params = {
ptContListNo: tree.contListNo,
contNo: tree.contNo
}
getGclHtqdList(params).then(response => {
const childList = response.data
childList.forEach(item => {
item.hasChildren = true,
item.children = null
})
setTimeout(() => {
resolve(childList)
}, 1000)
})
}
el-table树形结构展示数据,含泪整理
最新推荐文章于 2024-06-29 10:00:00 发布