Vue+element UI table 多级表头和动态表数据
实现多级表头、动态数据 效果第一步: 创建3个vue文件:my-column.vue// el-table-columnmy-table.vue// el-table中使用el-table-columnuse-table.vuemy-column.vue<template><el-table-column:prop="col.prop":label="col.label"alig
·
实现多级表头、动态数据 效果
第一步: 创建3个vue文件:
my-column
.vuemy-table
.vueuse-table
.vue
my-column
.vue
<template>
<el-table-column
:prop="col.prop"
:label="col.label"
align="center"
>
<template v-if="col.children">
<my-column v-for="(item, index) in col.children"
:key="index"
:col="item"></my-column>
</template>
</el-table-column>
</template>
<script>
export default {
name: 'MyColumn',
props: {
col: {
type: Object
}
}
}
</script>
my-table
.vue
<template>
<div class="my-table">
<el-table :data="data" max-height="800">
<el-table-column label="序号" type="index" width="70" align="center"/>
<my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
</el-table>
</div>
</template>
<script>
import MyColumn from './my-column'
export default {
components: {
MyColumn
},
props: {
col: {
type: Array
},
data: {
type: Array
}
}
}
</script>
use-table
.vue
<template>
<my-table
:col="col"
:data="dataList">
</my-table>
</template>
<script>
import MyTable from './my-table'
export default {
name: "UseTable",
components: { MyTable },
data() {
return {
col: [],
dataList:[]
}
},
methods: {
getList() {
col: [
{
prop: 'date',
label: '日期'
},
{
label: '事务所',
children: [
{
prop: 'name',
label: '代码'
},{
prop: 'name',
label: '名称'
}
]
},
{
label: '上市公司审计',
children: [
{
prop: 'name',
label: '收费'
},{
prop: 'name',
label: '数量'
},{
prop: 'name',
label: '平均价格'
}
]
},
{
label: '配送信息',
children: [
{
prop: 'name',
label: '姓名'
},
{
label: '地址',
children: [
{
prop: 'province',
label: '省份'
},
{
prop: 'city',
label: '市区'
},
{
prop: 'address',
label: '地址'
}
]
}
]
}
],
dataList: [
{
date: '2016-05-03',
xx: {
code: xx,
name: xx
},
xx2: {
code: xx,
name: xx
},
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
]
}
}
}
</script>
第二步:将上面的三个文件代码复制到项目中,即可实现多级表头和动态表数据效果.
更多推荐
已为社区贡献25条内容
所有评论(0)