element+vue|element+vue 动态多表头与动态插槽
一、需求
满足用户自行配置表格，减少对系统代码维护量。
二、参考文章
https://blog.csdn.net/weixin_...
三、效果
【element+vue|element+vue 动态多表头与动态插槽】
文章图片
表头json：
说明：scope（字段名可另取）为是否对该列开启插槽。propChildren为多级表头。
tableHead: [{
key: '1',
label: '日期',
prop: 'date',
width: '100',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
},
{
key: '2',
label: '姓名',
prop: 'name',
width: '100',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: false
},
{
key: '3',
label: '分析情况',
prop: 'analysis',
width: '100',
headerAlign: 'center',
propChildren: [{
key: '31',
label: '同比',
prop: 'TB',
width: '100',
headerAlign: 'center',
align: 'center',
scope: true,
sortable: true
},
{
key: '32',
label: '环比',
prop: 'HB',
width: '100',
headerAlign: 'center',
align: 'center',
scope: true,
sortable: true
},]
},
{
key: '4',
label: '金额',
prop: 'price',
width: '100',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
{
key: '5',
label: '地址',
prop: 'address',
width: '',
headerAlign: 'left',
align: 'left',
scope: false,
sortable: false
}
],四、全部代码
{{ scope.row[item.prop] }}'0'" style="color: green">
{{ scope.row[item.prop] }}%{{ scope.row[item.prop] }}%{{ scope.row[item.prop] }}{{ scope.row[item.prop] }}
{{ scope.row[item.prop] }}'0'" style="color: green">
{{ scope.row[item.prop] }}%{{ scope.row[item.prop] }}%{{ scope.row[item.prop] }}{{ scope.row[item.prop] }}
推荐阅读
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 爱就是希望你好好活着
- 昨夜小楼听风
- 知识
- 死结。
- 我从来不做坏事
- 烦恼和幸福
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- Linux下面如何查看tomcat已经使用多少线程
- 说得清，说不清