elementui table表格动态生成多级表头

1.实现效果

2.封装table表格组件

test1.vue

<template><el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label"><template v-for="item in coloumnHeader.children"><tableColumnv-if="item.children && item.children.length":key="item.id":coloumn-header="item"></tableColumn><el-table-columnv-else:key="item.name":label="item.label":prop="item.prop">//悬浮展示详情<template slot-scope="scope"><el-popoverplacement="top-start"width="200"trigger="click"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-button type="text" slot="reference">                {{scope.row[scope.column.property]}}</el-button></el-popover></template></el-table-column></template></el-table-column>
</template><script>
export default {name: "tableColumn",props: {coloumnHeader: {type: Object,required: true,},},
};
</script><style scoped>
</style>

test2.vue

<template><el-table :data="tableData"><template v-for="item in tableHeader"><table-columnv-if="item.children && item.children.length":key="item.id":coloumn-header="item"></table-column><el-table-columnv-else:key="item.id":label="item.label":prop="item.prop"></el-table-column></template></el-table>
</template><script>
import TableColumn from "./test1.vue";
export default {props: {// 表格的数据tableData: {type: Array,required: true,},// 多级表头的数据tableHeader: {type: Array,required: true,},},components: {TableColumn,},
};
</script><style scoped>
.el-button{border: none;padding: 0;color: #606266;
}
</style>

test3.vue 调用组件使用

<template><div><dynamic-table:table-data="tableData":table-header="tableConfig"></dynamic-table></div>
</template><script>
import DynamicTable from "./test2.vue";
export default {components: {DynamicTable,},data() {return {// 表数据tableData: [{date: "2021-09-06",name: "张三",phone: "15739951445",province: "河北省",city: "张家口",address: "河北省张家口市桥西区",},],// 表头数据tableConfig: [{id: 100,label: "日期",prop: "date",},{id: 200,label: "配送信息",prop: "",children: [{id: 210,label: "姓名",prop: "",children:[{id:300,label:"姓名1",prop:"name"},{id:301,label:"姓名2",prop:"name"},{id:302,label:"姓名3",prop:"name"},]},{id: 220,label: "电话",prop: "",children:[{id:303,label:"电话1",prop:"phone"},{id:304,label:"电话2",prop:"phone"},{id:305,label:"电话3",prop:"phone"},]},{id: 200,label: "地址",prop: "",children: [{id: 210,label: "省份",prop: "province",},{id: 220,label: "城市",prop: "city",},{id: 220,label: "详细地址",prop: "address",},],},],},{id:400,label:"测试表头",prop:"",children:[{id:401,label:"测试二级表头1",prop:"",children:[{id:402,label:"测试三级表头1",prop:"name"},{id:403,label:"测试三级表头2",prop:"phone"}]},{id:404,label:"测试二级表头2",prop:"",children:[{id:405,label:"测试三级表头",prop:"phone"},{id:406,label:"测试三级表头2",prop:"name"}]}]}],};},
};
</script><style scoped>
</style>

elementui table表格动态生成多级表头相关推荐

css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
使用Element-UI中的Table表格组件制作多级表头
多级表头是表格相关需求中常见的一种场景.数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系. 通过仔细阅读Element-UI官方文档,发现,通过嵌套el-table-column的方法,可以 ...
vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个...
element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = [];for (var key in obj ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 步骤: 写入动态html模板 <vxe-tableid="prdReques ...
VUE之Vxe-table动态生成多级表头
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 实现步骤: 模板中定义: <vxe-tablei ...
el-table 动态生成多级表头
html代码: <el-tablev-loading="loading":data="orgTableData":header-cell-style=&q ...
bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...

elementui table表格动态生成多级表头

elementui table表格动态生成多级表头相关推荐

最新文章

热门文章