需求:有一个表格,要求行展开得到该行的详细数据,每行的详细数据字段不一致。
在网上搜了下,做完发现,展开某行数据时会把所有展开替换掉,是自己定义变量的问题,改完之后看了下到单行行展开,参考了大佬们的博客,这里不再过多赘述
vue-element el-table点击行展开,并且收起其他行_el-table展开一行 自动收起上一行-CSDN博客
但需求要求全部可展开,话不多说上代码
<el-table ref="table" :height="height" stripe border v-loading="loading" :data="tracedBackList"
//默认全部加载可不用row-key和expand-change事件
row-key="pid" @expand-change="handleExpandChange">
<el-table-column type="expand" >
<template #default="props">
<div>
<el-table :data="props.row.children" ref="childTable" :border="childBorder" >
<el-table-column class="expanded-table-colum"
v-for="(column, index) in props.row.computedColumns"
:key="index"
:label="column.label"
:prop="column.prop"
:width="column.minWidth"
show-overflow-tooltip
/>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column label="pid" align="center" prop="pid" v-if="false"/>
</el-table>
function getList() {
getAllOperationData(请求参数).then(response => {
if (200 == response.code) {
const {data} = response;
tracedBackList.length = 0;
data.forEach(item=>{
item.children = [];
item.computedColumns = [];
tracedBackList.push(item);
// getDetailDataList(item);
})
total.value = response.data.length;
}
}).finally(() => {
loading.value = false;
});
}
function getDetailDataList (data){
const param = {请求参数};
getDetailData(param).then(response=>{
if (200 == response.code) {
//默认全部加载
<!-- data.children = response.data;
data.computedColumns = Object.keys(response.data).map(key => ({ label: key, prop: key, minWidth:key.length > 5? key.length * 25:key.length * 40 }));
-->
//单行点击加载
data.children = [response.data];
data.computedColumns = Object.keys(response.data).map(key => ({ label: key, prop: key, minWidth:key.length > 5? key.length * 25:key.length * 40 }));
}
}).finally(() => {
loading.value = false;
});
}
//单行点击加载
function handleExpandChange (expandedRows, row, expanded) {
getDetailDataList(expandedRows);
};
以上分为两种,一种是在查询行数据时直接加载全部子数据,一种是每展开一行加载该行详细数据,本人较懒,没将两种代码分开展示,此稿只做笔记。