element有个可展开表格 只需要添加 type="expand"就行了 展开项 如果是死数据的话 没有任何问题 但是 如果是动态数据的话 此时就会有很大的坑 当你动态赋值的时候 不管你怎么改变 得到的值都是上一次的值 因为第一次 他的值是默认值 之所以是默认值 是因为他生成表格的时候 就把这个展开项同时生成了 你可以打印一下断点自行查看一下 虽然通过接口获取数据了 但是依旧是赋不上值的 为了验证 你可以在表格外 打印接口请求的值 是没有任何问题的 话不多说 遇到这坑的人肯定明白我说的是什么 先撸一下这边的需求吧
点击工单编号 弹出工单详情 虽然type="expand" 可以实现展开 但是他默认是加的小箭头 其他的是无法实现的 所以这时候你要自己想了 我这边是定义一个变量index当开关来用的
<template>
<el-table v-loading="loading" :data="tableData" style="width: 100%"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="toggleRowExpansion">
<el-table-column type="expand" align="right">
<template slot-scope="scope">
<div class="orderDetails">
<h3>创建</h3>
<div>
<div class="itemListstyle">
<span>工单编号：</span>
<span>{{scope.row.details.create.ORDERNO}}</span>
</div>
<div class="itemListstyle">
<span>用户名称：</span>
<span>{{scope.row.details.create.NAME}}</span>
</div>
<div class="itemListstyle">
<span>联系地址：</span>
<span>{{scope.row.details.create.ADDRESS1}}</span>
</div>
<div class="itemListstyle">
<span>来电电话：</span>
<span>{{scope.row.details.create.CULTEL}}</span>
</div>
<div class="itemListstyle">
<span>供应商：</span>
<span>{{scope.row.details.create.SUPPLIERNAME}}</span>
</div>
<div class="itemListstyle">
<span>服务类型：</span>
<span>{{scope.row.details.create.SUNAME}}</span>
</div>
<div class="itemListstyle">
<span>服务要求：</span>
<span :title='scope.row.details.create.SEVICECONTENT'>{{scope.row.details.create.SEVICECONTENT}}</span>
</div>
<div class="itemListstyle">
<span>服务预约日期：</span>
<span>{{scope.row.details.create.RESERVEDATE}}</span>
</div>
<div class="itemListstyle">
<span>工单处理时间：</span>
<span>{{scope.row.details.create.FCD}}</span>
</div>
</div>
</div>
</div>
</el-table-column>
<el-table-column label="工单编号">
<template slot-scope="scope">
<span style="color:#ffc600;cursor: pointer" @click="open(scope.row)">{{scope.row.ORDER_NO}}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
import _ from "lodash"
import { getFirstHelp,getDetail } from "@/api/order"
export default {
props:['closematchmakingList','id'],
data(){
return{
form: {
area: '',
pageNum: 1,
pageSize: 10
},
total: 0,
loading:true,
tableData:[],
getRowKeys(row) {
return row.ROW_ID;
},
create: {},
dispatch: '',
myReturn: '',
confirm: '',
expands: [],
index:false,
orderId:''
}
},
methods:{
//重置 为了动态数据做准备
reset(){
this.tableData.forEach((item, index) => {
item.details = {
create: {
ORDERNO:'',
NAME:'',
ADDRESS1:'',
CULTEL:'',
SUPPLIERNAME:'',
SUNAME:'',
SEVICECONTENT:'',
RESERVEDATE:'',
FCD:''
},
dispatch: {
SUPPLIER_NAME:'',
TELEPHONE:'',
TYPE:'',
IS_WOKR:'',
SERVE_TIME:'',
FCD:''
},
myReturn: {
IS_CALL:'',
SUPILER_IS_CALL:'',
SERVER_CONTENT:'',
FCD:'',
},
confirm: {
IS_CALL:'',
SUPPLIER_IS_CALL:'',
SUPPLIER_REASON:'',
CONFIRM_TYPE:'',
SERVERTIME:'',
SERVER_CONTENT:'',
FCD:'',
}
};
})
},
//打开工单详情
open(row){
this.index=!this.index;
if(this.index){
this.reset()
this.getDetail(row.UUID)
this.orderId=row.ROW_ID
//用来展开
this.expands.push(row.ROW_ID);
}else{
this.expands=[]
}
// this.$forceUpdate()
},
//获取详情
getDetail(id) {
getDetail({orderId: id}).then(res =>{
if (res.code === 0) {
this.tableData.forEach((item, index) => {
item.details.create = res.data.create;
})
this.dispatch = res.data.dispatch;
this.myReturn = res.data.return;
this.confirm = res.data.confirm
// _this.$forceUpdate()
}
})
},
//表格自带的展开
toggleRowExpansion(row,index){
this.index=!this.index
this.expands = [];
if(!index.length){
this.expands = [];
}else{
this.expands.push(row.ROW_ID);
this.reset()
this.getDetail(row.UUID)
}
},
//获取表格 这里就是关键
getData() {
this.form.area = this.id;
this.form.type = '2'
getFirstHelp(this.form).then(res => {
if (res.code === 0) {
//这里就是为了 生成表格的时候 同时把子菜单给渲染 此时是空 目的是占位 就是为了动态更新
let _obj_ = _.cloneDeep(res.data.list);
_obj_.forEach((item, index) => {
item.details={
create: {
ORDERNO:'',
NAME:'',
ADDRESS1:'',
CULTEL:'',
SUPPLIERNAME:'',
SUNAME:'',
SEVICECONTENT:'',
RESERVEDATE:'',
FCD:''
},
dispatch: {
SUPPLIER_NAME:'',
TELEPHONE:'',
TYPE:'',
IS_WOKR:'',
SERVE_TIME:'',
FCD:''
},
myReturn: {
IS_CALL:'',
SUPILER_IS_CALL:'',
SERVER_CONTENT:'',
FCD:'',
},
confirm: {
IS_CALL:'',
SUPPLIER_IS_CALL:'',
SUPPLIER_REASON:'',
CONFIRM_TYPE:'',
SERVERTIME:'',
SERVER_CONTENT:'',
FCD:'',
}
}
})
this.tableData = _.cloneDeep(_obj_);
this.total = res.data.total;
this.loading = false;
}
});
}
},
mounted(){
this.getData()
}
}
</script>