vue自定义表格（每一列表格下面包含一个子表格）
实现效果图
template
<div class="marsTable" ref="marsTable">
<div style="border-bottom: 1px solid #EBEBEB" >
<!-- 表格 -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<!-- 序号 -->
<th scope="col">{{$t('menu.number')}}</th>
<!-- 任务名称 -->
<th scope="col">{{$t('menu.tsName')}}</th>
<!-- 执行流程 -->
<th scope="col">{{$t('menu.doFlow')}}</th>
<!-- 执行方式 -->
<th scope="col">{{$t('menu.doMethod')}}</th>
<!-- 所属项目 -->
<th scope="col">{{$t('menu.pjUnder')}}</th>
<!-- 区域 -->
<th scope="col">{{$t('menu.area')}}</th>
<!-- 执行组 -->
<th scope="col">{{$t('menu.doGroup')}}</th>
<!-- 执行人 -->
<th scope="col">{{$t('menu.doMan')}}</th>
<!-- 执行状态 -->
<th scope="col">{{$t('menu.doStatus')}}</th>
<!-- 操作 -->
<th scope="col">{{$t('menu.operate')}}</th>
</tr>
</thead>
<tbody id="tbody" v-for='(item,index) in num' :key='index' >
<tr class="brotherTr" >
<td >{{(query.pager.page - 1) * query.pager.rows + index + 1}}</td>
<td>{{item.Name}}</td>
<td>{{item.m_OperateProcess_Name}}</td>
<td>{{item.OperateType_Name}}<span v-if="item.BeginTime"> {{item.BeginTime}}-{{item.EndTime}}</span></td>
<td >{{item.m_ProjectType_Name}}</td>
<td>{{item.m_Area_Name}}</td>
<!-- @click="seeGroup" -->
<td >
<span style="color:#409EFF;cursor:pointer;" v-if="item.Group_Name" @click="seeGroup(item.GroupID)">{{item.Group_Name}}</span>
<span v-else>-</span>
</td>
<td>{{item.m_Employee_Name | noValue}}</td>
<td style="color:#f0ad4f">
<!-- 待执行 待执行 执行中 执行中 未开始-->
<span v-if="item.Record_State==-1&&item.isTime==0&& item.OperateType==0 ">{{$t('menu.waitPending')}}</span>
<span v-if="item.Record_State==-1&&item.isTime==1">{{$t('menu.waitPending')}}</span>
<span v-if="item.Record_State==0&&item.isTime==1">{{$t('menu.pendingIng')}}</span>
<span v-if="item.Record_State==0&& item.OperateType==0">{{$t('menu.pendingIng')}}</span>
<span v-if="item.Record_State==-1&&item.isTime==0&& item.OperateType==1">{{$t('menu.noBegin')}}</span>
</td>
<td style="padding:0 0 0 30px;text-align:left;box-sizing: border-box;">
<!-- 任务详情 --><!-- 终止 -->
<el-button
v-if="item.State!=-1" @click="toggleShow(index,item.ID,item.Record_ID)"
class="hoveTop"
type="text"
>
<img src="./video/tsdetail.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.tsdetail')}}</span>
</el-button>
<el-button
v-show="per_taskover"
v-if="item.OperateType!=0"
@click="stopTask(item.ID)"
class="hoveTop"
type="text"
>
<img src="./video/stop.png" class="cocur mr10" alt="">
<span class="hoveXian" >{{$t('menu.stop')}}</span>
</el-button>
<!-- <span v-if="item.State!=-1" @click="toggleShow(index,item.ID)" class="cocur mr10" >{{$t('menu.tsdetail')}}</span>
<span class="cocur" style="color:#409EFF" @click="stopTask(item.ID)">{{$t('menu.stop')}}</span> -->
</td>
</tr>
<tr>
<transition name="el-zoom-in-top">
<td colspan="10" v-show="item.hide?true:false" >
<table class="table table-striped table-bordered table-sm sonTab" >
<tr class="sonHead" >
<td :rowspan="item.child.length+1" >{{item.Name}}</td>
<!-- 序号 -->
<!-- <th scope="col">{{$t('menu.number')}}</th> -->
<!-- 步骤 -->
<th scope="col">{{$t('menu.step')}}</th>
<!-- 步骤名称 -->
<th scope="col">{{$t('menu.stepName')}}</th>
<!-- 结果 -->
<th scope="col">{{$t('menu.result')}}</th>
<!-- 开始时间 -->
<th scope="col">{{$t('menu.StartTime')}}</th>
<!-- 完成时间 -->
<th scope="col">{{$t('menu.completeTime')}}</th>
<!-- 工作时长 -->
<th scope="col">{{$t('menu.workTime')}}</th>
<!-- 操作 -->
<th scope="col">{{$t('menu.operate')}}</th>
</tr>
<tr v-for='(items,index) in item.child' :key='index' id="sonTbody" class="sonTd" >
<!-- <td>{{(query.pager.page - 1) * query.pager.rows + index + 1}}</td> -->
<td>{{items.StepNumber}}</td>
<td>{{items.step_Name}}</td>
<td>
<!-- {{ResultState[items.ResultState]}} -->
<!-- 未审核 -->
<span v-if="items.ResultState==0" >{{$t('menu.notAudit')}}</span>
<!-- 通过 -->
<span v-if="items.ResultState==1" style="color:#8bc34b">{{$t('menu.pass')}}</span>
<!-- 不通过 -->
<span v-if="items.ResultState==2" style="color:#da534f">{{$t('menu.noPass')}}</span>
</td>
<td>{{items.BeginTime}}</td>
<td >{{items.EndTime}}</td>
<td>{{items.TimeLength}}</td>
<!-- 图片 -->
<!-- 视频 -->
<td >
<el-button
v-show="items.FileType==1" @click="photoShow(items.FileSrc,items.step_Name)"
class="hoveTop"
type="text"
>
<img src="./video/picture.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.picture')}}</span>
</el-button>
<el-button
v-show="items.FileType==2" @click="videoShow(items.FileSrc,items.step_Name)"
class="hoveTop"
type="text"
>
<img src="./video/video.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.video')}}</span>
</el-button>
</td>
</tr>
</table>
</td>
</transition>
</tr>
</tbody>
<tr v-if="num.length<=0" class="noData">
<!-- 暂无数据 -->
<td colspan="10" >{{$t('menu.tmporarilyNoData')}}</td>
</tr>
</table>
</div>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pager.page"
:page-size="query.pager.rows"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</div>
</div>
js
//展开收起按钮点击
toggleShow(index,ID,Record_ID) {
// 根据id 获取详情
let params={
Record_ID:Record_ID
}
GetRecordListByTaskID(params).then(res=>{
let {ReturnCode,Data}=res
if(ReturnCode==200){
this.sonList=Data.list
for(let j=0;j<this.num.length;j++){
let obj = this.num[index]; // 找到点击的dom对象
if(this.num[j].ID==ID){
this.num[j].child=this.sonList
obj.hide = !obj.hide; // 向这个对象中添加 hide 属性
}else{
this.num[j].hide= false
}
this.$set(this.num,index, obj); // 把添加完hide 属性的新对象set()进data数据中
}
}
})
},
如果是操作上有两个可以弹出的子表格
效果图
template
<div class="marsTable" ref="marsTable">
<div style="border-bottom: 1px solid #EBEBEB" >
<!-- 表格 -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<!-- 序号 -->
<th scope="col">{{$t('menu.number')}}</th>
<!-- 任务名称 -->
<th scope="col">{{$t('menu.tsName')}}</th>
<!-- 执行流程 -->
<th scope="col">{{$t('menu.doFlow')}}</th>
<!-- 执行方式 -->
<th scope="col">{{$t('menu.doMethod')}}</th>
<!-- 所属项目 -->
<th scope="col">{{$t('menu.pjUnder')}}</th>
<!-- 区域 -->
<th scope="col">{{$t('menu.area')}}</th>
<!-- 执行组 -->
<th scope="col">{{$t('menu.doGroup')}}</th>
<!-- 执行人 -->
<th scope="col">{{$t('menu.doMan')}}</th>
<!-- 开始执行时间 -->
<th scope="col">{{$t('menu.startBeginTime')}}</th>
<!-- 执行结束时间 -->
<th scope="col">{{$t('menu.endOverTime')}}</th>
<!-- 工作时长 -->
<th scope="col">{{$t('menu.workTime')}}</th>
<!-- 执行状态 -->
<th scope="col">{{$t('menu.doStatus')}}</th>
<!-- 审核状态 -->
<th scope="col">{{$t('menu.auditedStatus')}}</th>
<!-- 操作 -->
<th scope="col">{{$t('menu.operate')}}</th>
</tr>
</thead>
<tbody id="tbody" v-for='(item,index) in num' :key='index'>
<tr class="brotherTr" :id="'listId'+item.ID">
<td >{{(query.pager.page - 1) * query.pager.rows + index + 1}}</td>
<td >
{{item.m_Task_Name}}
</td>
<td>{{item.m_OperateProcess_Name}}</td>
<td>{{item.OperateType_Name}}<span v-if="item.BeginTime">{{item.BeginTime}}-{{item.EndTime}}</span></td>
<td >{{item.m_ProjectType_Name}}</td>
<td>{{item.m_Area_Name}}</td>
<!-- @click="seeGroup" -->
<td >
<span style="color:#409EFF;cursor:pointer;" v-if="item.Group_Name" @click="seeGroup(item.GroupID)">{{item.Group_Name}}</span>
<span v-else>-</span>
</td>
<td>{{item.Over_Employee_Name | noValue}}</td>
<td>{{item.CreateTime | noValue}}</td>
<td>{{item.OverTime | noValue}}</td>
<td>{{item.TimeLength}}</td>
<td>
<!-- 超时完成 已完成 -->
<span style="color:#8bc34b" v-if="item.State==4">{{$t('menu.overtimeComplate')}}</span>
<span style="color:#8bc34b" v-if="item.State==1">{{$t('menu.completes')}}</span>
</td>
<td>{{checkResult[item.AuditingIfPass]}}</td>
<td style="padding:0 20px 0 30px;text-align:left;box-sizing: border-box;">
<!-- 任务详情 --> <!-- 审核详情 --><!-- 通过 --><!-- 不通过 -->
<el-button
@click="toggleShow(index,item.ID,item.Record_ID)"
class="hoveTop"
type="text"
>
<img src="./video/tsdetail.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.tsdetail')}}</span>
</el-button>
<el-button
@click="reviewDetail(index,item.ID,item.Record_ID)"
v-show="item.AuditingIfPass!=0"
class="hoveTop"
type="text"
>
<img src="./video/adDetail.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.adDetail')}}</span>
</el-button>
<el-button
@click="passBtn(item.ID,item.Record_ID)"
v-show="item.AuditingIfPass==0 && per_taskpass"
class="hoveTop"
type="text"
>
<img src="./video/pass.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.pass')}}</span>
</el-button>
<el-button
@click="notThrough(item.ID,item.Record_ID)"
v-show="item.AuditingIfPass==0 && per_tasknopass"
class="hoveTop"
type="text"
>
<img src="./video/noPass.png" class="cocur mr10" alt="">
<span class="hoveXian">{{$t('menu.noPass')}}</span>
</el-button>
<!-- <span @click="toggleShow(index,item.ID)" class="cocur mr10" >{{$t('menu.tsdetail')}}</span>
<span class="cocur mr10" @click="reviewDetail(index,item.ID,item.Record_ID)" v-show="item.AuditingIfPass!=0">{{$t('menu.adDetail')}}</span>
<span class="cocur mr10" @click="passBtn(item.ID,item.Record_ID)" v-show="item.AuditingIfPass==0">{{$t('menu.pass')}}</span>
<span class="cocur mr10" @click="notThrough(item.ID,item.Record_ID)" v-show="item.AuditingIfPass==0">{{$t('menu.noPass')}}</span> -->
</td>
</tr>
<!-- 任务详情 -->
<tr>
<transition name="el-zoom-in-top">
<td colspan="14" v-show="item.hide?true:false" >
<table class="table table-striped table-bordered table-sm sonTab" >
<tr class="sonHead" >
<td :rowspan="item.child.length+1" >{{item.m_Task_Name}}</td>
<!-- 序号 -->
<!-- <th scope="col">{{$t('menu.number')}}</th> -->
<!-- 步骤 -->
<th scope="col">{{$t('menu.step')}}</th>
<!-- 步骤名称 -->
<th scope="col">{{$t('menu.stepName')}}</th>
<!-- 结果 -->
<th scope="col">{{$t('menu.result')}}</th>
<!-- 开始时间 -->
<th scope="col">{{$t('menu.StartTime')}}</th>
<!-- 完成时间 -->
<th scope="col">{{$t('menu.completeTime')}}</th>
<!-- 工作时长 -->
<th scope="col">{{$t('menu.workTime')}}</th>
<!-- 操作 -->
<th scope="col">{{$t('menu.operate')}}</th>
</tr>
<tr v-for='(items,index) in item.child' :key='index' id="sonTbody" class="sonTd" >
<!-- <td>{{index+1}}</td> -->
<td>{{items.StepNumber}}</td>
<td>{{items.step_Name}}</td>
<td>
<!-- {{ResultState[items.ResultState]}} -->
<!-- 未审核 -->
<span v-if="items.ResultState==0" >{{$t('menu.notAudit')}}</span>
<!-- 通过 -->
<span v-if="items.ResultState==1" style="color:#8bc34b">{{$t('menu.pass')}}</span>
<!-- 不通过 -->
<span v-if="items.ResultState==2" style="color:#da534f">{{$t('menu.noPass')}}</span>
</td>
<td>{{items.BeginTime | noValue}}</td>
<td >{{items.EndTime | noValue}}</td>
<td>{{items.TimeLength}}</td>
<!-- 图片 -->
<!-- 视频 -->
<td >
<el-button
v-show="items.FileType==1" @click="photoShow(items.FileSrc,items.step_Name)"
class="hoveTop"
type="text"
>
<img src="./video/picture.png" class="cocur " alt="">
<span class="hoveXian">{{$t('menu.picture')}}</span>
</el-button>
<el-button
v-show="items.FileType==2" @click="videoShow(items.FileSrc,items.step_Name)"
class="hoveTop"
type="text"
>
<img src="./video/video.png" class="cocur " alt="">
<span class="hoveXian">{{$t('menu.video')}}</span>
</el-button>
</td>
</tr>
</table>
</td>
</transition>
</tr>
<!-- 审核详情 -->
<tr>
<transition name="el-zoom-in-top">
<td colspan="14" v-show="item.reviewHide">
<table class="table table-striped table-bordered table-sm sonTab" >
<tr class="sonHead" >
<td :rowspan="item.child.length+1" >{{item.m_Task_Name}}</td>
<!-- 审核人 -->
<th scope="col">{{$t('menu.adMan')}}</th>
<!-- 审核时间 -->
<th scope="col">{{$t('menu.adTime')}}</th>
<!-- 审核结果 -->
<th scope="col">{{$t('menu.adResult')}}</th>
<!-- 是否重启任务 -->
<!-- <th scope="col">{{$t('menu.tsResetAsk')}}</th> -->
<!-- 备注 -->
<th scope="col">{{$t('menu.remark')}}</th>
</tr>
<tr v-for='(items,index) in item.child' :key='index' id="sonTbody" class="sonTd" >
<td>{{items.AuditingMan}}</td>
<td>{{items.AuditingTime}}</td>
<td>{{ResultState[items.AuditingIfPass]}}</td>
<!-- <td>{{restart[items.ifOpenState]}}</td> -->
<td >
{{items.AuditingRemark | noValue}}
</td>
</tr>
</table>
</td>
</transition>
</tr>
</tbody>
<tr v-if="num.length<=0" class="noData">
<!-- 暂无数据 -->
<td colspan="14" >{{$t('menu.tmporarilyNoData')}}</td>
</tr>
</table>
</div>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pager.page"
:page-size="query.pager.rows"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</div>
</div>
js
//展开收起按钮点击
toggleShow(index,ID,Record_ID) {
// console.log(ID,'ID')
// 根据id 获取详情
let params={
Record_ID:ID
}
GetRecordListByTaskID(params).then(res=>{
let {ReturnCode,Data}=res
if(ReturnCode==200){
this.sonList=Data.list
for(let j=0;j<this.num.length;j++){
if(this.num[j].reviewHide){
this.num[j].reviewHide=false
}
let obj = this.num[index]; // 找到点击的dom对象
if(this.num[j].ID==ID){
this.num[j].child=this.sonList
obj.hide = !obj.hide; // 向这个对象中添加 hide 属性
}else{
this.num[j].hide= false
}
this.$set(this.num,index, obj); // 把添加完hide 属性的新对象set()进data数据中
}
}
})
},
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
