1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > el-table表格嵌套

el-table表格嵌套

时间:2021-10-05 15:43:07

相关推荐

el-table表格嵌套

在父表嵌入相关联的子表,点击父表的当前行可以展开相关联的子表,再次点击会收起,使用的是type="expand"的属性。

<div class="nested-table-example"><el-table :data="tableData" @expand-change="handleExpandChange" style="width: 100%" height="630"><el-table-column type="selection" width="45" align="center"></el-table-column><el-table-column type="expand"><template slot-scope="scope"><div class="nested-table-container"><el-table :data="scope.row.emrProvecs" style="width: 100%"><!-- 子表格的列 --><el-table-column prop="feenm" label="项目名称" align="center"></el-table-column><el-table-column prop="price" label="单价" align="center"></el-table-column><el-table-column prop="qty" label="数量" align="center"></el-table-column><el-table-column prop="referPrice" label="参考总金额" align="center"></el-table-column></el-table></div></template></el-table-column><el-table-column label="操作" fixed align="center" width="160"><template slot-scope="scope"><el-button size="small" v-show="scope.row.state== '未确认' ">确认</el-button><el-button size="small">删除</el-button><el-button size="small" v-show="scope.row.state== '已确认' ">打印</el-button></template></el-table-column><el-table-column prop="prvnm" label="单据名称" align="center" width="200"></el-table-column><el-table-column prop="billDoc" label="开单医生" align="center"></el-table-column><el-table-column prop="billDate" label="开单日期" align="center" width="200"></el-table-column><el-table-column prop="state" label="状态" align="center"></el-table-column><el-table-column prop="proveContent" label="明细内容" align="center"></el-table-column></el-table></div>vdata:tableData:[],//保存列表查询结果vmethod://获取申请单列表数据(分页)getProvePagedList(pageIndex){httpApi.proveApi.getProvePagedList({pageIndex:pageIndex,pageSize:12,patId:this.$store.state.patid}).then(res=>{this.tableData=res.data.data.items})},// 在这里可以处理展开或收起的逻辑handleExpandChange(row) {console.log(row);},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。