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">&nbsp;{{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-buttonv-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-buttonv-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-buttonv-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-buttonv-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-paginationbackground@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>

//展开收起按钮点击toggleShow(index,ID,Record_ID) {// 根据id 获取详情let params={Record_ID:Record_ID}GetRecordListByTaskID(params).then(res=>{let {ReturnCode,Data}=resif(ReturnCode==200){this.sonList=Data.listfor(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.sonListobj.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-buttonv-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-buttonv-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-paginationbackground@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>

//展开收起按钮点击toggleShow(index,ID,Record_ID) {// console.log(ID,'ID')// 根据id 获取详情let params={Record_ID:ID}GetRecordListByTaskID(params).then(res=>{let {ReturnCode,Data}=resif(ReturnCode==200){this.sonList=Data.listfor(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.sonListobj.hide = !obj.hide;  // 向这个对象中添加 hide 属性}else{this.num[j].hide= false}this.$set(this.num,index, obj);  // 把添加完hide 属性的新对象set()进data数据中 }}})},

vue自定义表格（每一列表格下面包含一个子表格）相关推荐

从Excel表格中复制列数据并粘贴到Word表格中
需求我现在在Excel中有一张班级里各位同学的信息表: 现在需要将其依次复制到Word文档的表格中: 解决方案在Excel中选中相关内容并复制: 在Word文档的相应位置进行选择性粘贴,选择&qu ...
QTableView表格视图的列宽设置
QTableView表格视图的列宽设置 Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因 ...
计算机考试行高怎么设置,2017年职称计算机考试WPS教程：表格行高列宽的调整...
2017年职称计算机考试WPS教程:表格行高列宽的调整导语:在WPS教程中的表格行高列宽的调整是怎样的呢?下面我么一起来看看相关的具体操作是怎样的吧.更多相关内容请上应届毕业生考试网查询. 表格行高 ...
itextpdf 表格跨行跨列与可视化图表
文章目录 itextpdf 表格跨行跨列与可视化图表效果图普通表格一(表头背景色) 普通表格二 (隔列变色) 表格跨行跨列可视化图表使用示例普通表格一(表头背景色) 普通表格二 (隔列变色) ...
vue 自定义生成表格并且可以输入
自定义输入表格的行和列,让后生成表格,请看效果: <div><el-input v-model="initdata.rows" type="number ...
java中设置表格的宽度_java 画pdf用itext调整表格宽度、自定义各个列宽的方法
ps:我用的版本是7.0.5 场景: 左侧第一列宽度不够,导致数据换行. Table table = new Table(new float[2]); new 一个Table之后,setWidthPe ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
vue实现变态表格表头和列固定
复杂表格表头和列固定对于这个问题,相信网上也会有很多答案,很多插件或者是类似的案例,一下是我参考别人所写的案例自己改造的一个变态表格 1.实现的效果是,左右滚动,左边列固定,上下滚动,上边头部固定 ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...

vue自定义表格（每一列表格下面包含一个子表格）

vue自定义表格（每一列表格下面包含一个子表格）

如果是操作上有两个可以弹出的子表格

vue自定义表格（每一列表格下面包含一个子表格）相关推荐

最新文章

热门文章