根据element ui官方文档说明,展开行需要用到两个属性:row-key 和 expand-row-keys,还有expand-change事件
在el-table中:
row-key="f_ID"
:expand-row-keys="expandKeys"
@expand-change="expandChange"
注意:row-key是数据的唯一标识。
template中完整代码如下:
<el-table :data="InfoTableData"
:height="tableHeight"
:row-class-name="tableRowClassName"
:row-style="selectedstyle"
@selection-change="handleSelectionChange"
@cell-click="handleOne"
@row-click="handleRow"
row-key="f_ID"
:expand-row-keys="expandKeys"
@expand-change="expandChange"
style="width: 100% ; fontSize:16px; margin-top: 100px;"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column type="expand">
<template #default="props">
<div m="4">
<h3>展开明细</h3>
<el-table :data="props.row.expandRow" v-loading="loading" element-loading-text="加载中...">
<el-table-column label="物料编码" prop="maT_CODE" />
<el-table-column label="产品编码" prop="maT_LOT" />
<el-table-column label="产品名称" prop="maT_NAME" />
<el-table-column label="生产日期" prop="maT_DC" :formatter="getMatDC"/>
<el-table-column label="数量" prop="maT_QTY" />
</el-table>
</div>
</template>
</el-table-column>
<el-table-column label="序号" width="100">
<template slot-scope="scope">
{{scope.$index + 1}}
</template>
</el-table-column>
<el-table-column label="状态" prop="f_STATE" width="60"/>
<el-table-column label="送货单编号" prop="f_CODE" width="150"/>
<el-table-column label="收货单编号" prop="receiptS_CODE" width="150"/>
<el-table-column label="源单类型" prop="sourcE_ORDER_TYPE" width="100"/>
<el-table-column label="源单编号" prop="sourcE_ORDER_CODE" width="100"/>
<el-table-column label="供应商" prop="provider" width="100"/>
<el-table-column label="生产商" prop="producer" width="100"/>
<el-table-column label="送货日期" prop="senD_DATA" width="120" :formatter="dateFormat"/>
<el-table-column label="收货地址" prop="receivE_ADDTESSES" width="100"/>
<el-table-column label="客户" prop="customer" width="100"/>
<el-table-column label="收货人" prop="receiver" width="100"/>
<el-table-column label="收货人联系方式" prop="receiveR_PHONE_NUMBER" width="140"/>
<el-table-column label="创建人" prop="creatoR_ID" width="100"/>
<el-table-column label="创建时间" prop="creatoR_TIME" width="120" :formatter="dateFormatCreate"/>
<el-table-column label="审核人" prop="checK_NAME" width="100"/>
<el-table-column label="审核时间" prop="checK_TIME" width="120" :formatter="dateFormatCheck"/>
<el-table-column label="收货时间" prop="" width="120" :formatter="dateFormatRecive"/>
</el-table>
解决展开行第一次展开数据不显示问题:在获取数据的时候往数据中追加一个expandRow字段(字段名可自定义)
获取数据的时候
...
this.InfoTableData.forEach(item => {
item.expandRow = []
})
...
data(){
return{
InfoTableData:[],
expandKeys:[],
loading:true,
fId:""
}
},
methods:{
// 展开行
expandChange(row,expandRow){
// 拿id
this.fId = row.f_ID;
//判断当前展开行是否有数据,没有则将expandKeys设为空
if(!expandRow.length){
this.expandKeys.shift()
this.expandKeys = [];
return;
}
//将展开行的f_ID push到expandKeys数组里面
this.expandKeys = [];
expandRow.forEach(item=>{
this.expandKeys.shift()
this.expandKeys.push(item.f_ID)
})
//判断是否关闭当前行
if(expandRow.indexOf(row) == -1){
this.expandKeys.shift()
row.expandRow = [];
return;
}
//发送axios请求
this.$axios.post("/api/MESAPI/DeliveryOrder/GetDeliveryOrder",{
"f_ID": this.fId
}).then(res=>{
if(res.data.code == 200){
this.loading = true;
//将数据赋值到追加的expandRow中
this.InfoTableData.forEach((item,index)=>{
if(item.f_ID === row.f_ID){
this.InfoTableData[index].expandRow = res.data.data.deliveryOrderDetail;
this.loading = false;
}
})
}else{
alert(res.data.msg)
}
})
},
}