antd table 动态设置columns(表头)内容(title)
由于工作需要,最近开始搞起了vue。对于vue,我什么都不会。什么特性都不知道,什么基础都没有。无非就是百度-->分析-->复制-->报错-->继续百度的流程中去搞呗。当然不建议这样啊,毕竟这样不好,面试可不能百度。当然你面试进去了工作大多数也还是百度。(面试造火箭,工作拧螺丝。)根据需求,现在要求我画出一个类似于下图的table:这就很有意思了,我连合并表头都是百度的。因
·
由于工作需要,最近开始搞起了vue。对于vue,我什么都不会。什么特性都不知道,什么基础都没有。无非就是百度-->分析-->复制-->报错-->继续百度的流程中去搞呗。当然不建议这样啊,毕竟这样不好,面试可不能百度。当然你面试进去了工作大多数也还是百度。(面试造火箭,工作拧螺丝。)
根据需求,现在要求我画出一个类似于下图的table:
这就很有意思了,我连合并表头都是百度的。因为我对vue一无所知,好奇怪哦,一无所知照样干活。这把再次对面试官们吐槽一下。
先说下合并表头。因为公司框架表头是写在vue里的,所以代码如下:
private columns = [
{
title: '项目',
dataIndex: 'projectName',
align: 'center'
},
{
title: '合计',
//定义children,然后就可以合并children所在的三个单元格
children: [
{
title: '预算',
dataIndex: 'completionRate',
align: 'center'
},
{
title: '已完成',
dataIndex: 'yearOnYear',
align: 'center'
},
{
title: '完成率',
dataIndex: 'monthOnMonth',
align: 'center'
}
],
align: 'center'
}
]
然后是动态变化的表头字段,title就是字段,也就是动态变化title。这个时候,就需要加一个slot,在vue里叫插。可以理解为slot插在这个位置,所以这个位置的内容应该是slot的内容。
<s-table
ref="table"
size="default"
rowKey="id"
bordered="true"
:columns="columns"
:data="loadData"
showPagination="auto"
>
<--增加一个插槽-->
<template slot="title1">{{title1}}</template>
</s-table>
具体放在哪里,你们可以试,不报错就行呗。这个时候Vue里与插槽对应的表头就要改成下面那样:
private columns = [
{
title: '项目',
dataIndex: 'projectName',
align: 'center'
},
{
// title: '合计',
//可以理解为关联插槽了。我试过,scopedSlots和slots应该是columns的一个属性,改成别的就不行。
//slots: {
//title: 'title1'
//},
scopedSlots: {
title: 'title1'
},
children: [
{
title: '预算',
dataIndex: 'completionRate',
align: 'center'
},
{
title: '已完成',
dataIndex: 'yearOnYear',
align: 'center'
},
{
title: '完成率',
dataIndex: 'monthOnMonth',
align: 'center'
}
],
align: 'center'
}
]
最后写个方法改变插槽里title1的值就可以了,如下:
protected loadData(parameter: any) {
this.title1 = parameter.projectName
}
//不要忘了定义title1哦
private title1 = '合计'
更多推荐
所有评论(0)