第一种:官方例子
返回的数据在 row 里,直接取即可
第二种:需要请求 但无分页需求
<el-table
:data="tableData"
:row-key="getRowKeys"
:expand-row-keys="expands"
height="100%"
@expand-change="handleExpand"
>
<el-table-column type="expand">
<template slot-scope="props">
<sub :sub-table="subTable[props.row.id]"></sub> </template> </el-table-column>
import Sub from './sub'
data(){
return {
tableData:[],//一级表格数据
subTable:{},
expandRows:[], // 记录用户展开的行 用来判断是否需要重新请求数据判断
expands:[],
}
}
methods:{
// 控制只展开一个 如果不需要控制 可以删除相关代码
getRowKeys(row) {
return row.id
},
handleExpand(row, expandRows) {
if (expandRows.length) {
this.expands = []
if (row) {
this.expands.push(row.id)
}
} else {
this.expands = []
}
if (this.expandRows.length <= expandRows.length) {
this.subTable[row.id].loading = true
request('api').then((res) => { this.$set(this.subTable[row.id], 'list', res || []) })
.finally(() => {
this.subTable[row.id].loading = false
})
}
this.expandRows = expandRows
},
//在获取 表格数据的方法里需要初始化一些值
getData(){
request('api').then((res) => {
this.expandRows = []
this.tableData=res || []
this.tableData.forEach((item) => {
this.subTable[item.id] = {
loading: false,
list: []
}
})
})
}
}
sub 子组件代码:
<el-table
v-loading="data.loading"
:data="data.list"
>
data(){
return {
data:[],
}
}
props: {
subTable: {
type: object,
},
watch: {
subTable: {
handler: function(newVal, oldVal) {
this.data = newVal
},
deep: true
},
第三种: 需要请求 并且有分页请求
和第二种方法类似,只是标红部分
需要修改下
//table template里模板需要修改
<sub :sub-table="subTable[props.row.id]" @getData="getData($event, row)"></sub>
//需带上id/第几页/每页显示多少条(简化版可以只控制第几页,条数写死)
request('api',{id:1,num:1,size:10}).then((res) => {
this.$set(this.subTable[row.id], 'list', res.list || [])
this.subTable[row.id].total = res.total || 0
})
//在获取 表格数据的方法里需要初始化一些值
this.subTable[item.id] = {
// 其实这个地方可以加上表头属性 可以动态传入表头一些相关有权限控制的值
loading: false,
list: [],
total: 0, //这个是和第二种相比较 多加的参数
num: 1, //这个是和第二种相比较 多加的参数
size: 10 //这个是和第二种相比较 多加的参数
}
// 子组件触发的分页请求
getData(dt, row){
this.subTable[row.id].num = data.num
this.subTable[row.id].size = data.size
this.handleExpand(row, this.expandRows)
}
网友评论