el-table el-table-column表头嵌套循环数据的示例代码
作者:林中明月间。
本文介绍了使用两个数组来实现el-table中表头的嵌套循环,一个数组用于循环表格数据,另一个用于循环表头,帮助读者更好地理解和应用表头嵌套功能,感兴趣的朋友跟随小编一起看看吧
需求:
不同以前 现在需要表头嵌套循环 以前只要
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> </el-table> </template> data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }] } }
现在需要表头嵌套循环:思路,两个数组,一个数组循环表格数据,一个循环表头
<el-table ref="pageTable" :data="tableData" style="margin-top: 15px" height="548" :header-cell-style="cellStyleFun" id="out-table2" > <el-table-column fixed label="管辖单位" prop="C_NAME" :formatter="fmtTableProp" align="center" width="230" > <template slot-scope="scope"> <el-button type="text" style="white-space: pre-wrap" @click="detailTree(scope.row)" >{{ scope.row.C_NAME }}</el-button > </template> </el-table-column> <el-table-column v-for="item in tableHeaderData" //单独循环表头-普通循环 :key="item" :label="item" align="center" width="140" > <el-table-column label="登录次数" prop="LOGIN_COUNT" align="center" width="140" > <template slot-scope="scope"> <span>{{ scope.row[item].LOGIN_COUNT }}</span> </template> </el-table-column> <el-table-column label="检查次数" prop="CHECK_COUNT" align="center" width="140" > <template slot-scope="scope"> <span>{{ scope.row[item].CHECK_COUNT }}</span> </template> </el-table-column> </el-table-column> </el-table> js: tableHeaderData: [], // 头部列表数据 tableData: [], // 列表数据 searchFun() { this.loading = true; const param = this.paramSet(); workStatisticsByGx(param).then((data) => { this.loading = false; if (data.data && data.data.code == 10000) { this.tableHeaderData = data.data.otherObj;//表头时间 this.tableData = data.data.obj;//表格数据 } else { this.$confirm(data.data.message || "服务器忙", "提示", { type: "warning", center: true, customClass: "warn-dialog", }) .then(() => {}) .catch(() => {}); } }); },
到此这篇关于el-table el-table-column表头嵌套循环数据的文章就介绍到这了,更多相关el-table el-table-column嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- 使用element ui中el-table-column进行自定义校验
- vue如何使用element ui表格el-table-column在里面做判断
- el-table-column叠加el-popover使用示例小结
- Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题
- Vue element el-table-column中对日期进行格式化方式(全局过滤器)
- vue中如何给el-table-column添加指定列的点击事件
- 关于el-table-column的formatter的使用及说明
- el-table-column 内容不自动换行的解决方法
- vue中el-table格式化el-table-column内容的三种方法