vue2+ant-design-vue table的使用:cus
2021-12-17 本文已影响0人
IamaStupid
vue2+ant-design-vue table的使用:customRender
需求情况:customRender使用了合并列,就没办法使用slot了
解决方法:
<a-table
:columns="columns"
row-key="userId"
:data-source="dataSource"
:pagination="false"
:loading="loading"
class="x-table"
>
<span slot="planNameTitle">{{$t('stats.tab1Text1')}}</span>
<span slot="nameTitle">{{$t('stats.tab1col1')}}<b>{{'('+userTotal+')'}}</b></span>
<span slot="supervisorTitle">{{$t('stats.tab1col2')}}</span>
<span slot="percentageTitle">{{$t('stats.tab1col3')}}</span>
<span slot="overdueCountTitle">{{$t('stats.tab1col4')}}</span>
<span slot="actionTitle">{{$t('stats.tab1col5')}}</span>
<span slot="action" slot-scope="text, record">
<span class="btn ant-dropdown-link" @click="handleGoDetail(record)">
<!-- 查看详情 -->{{$t('staff.tableDetail')}}
<i class="iconfont icon-zhankai"></i>
</span>
</span>
<span slot="percentage" slot-scope="text, record">
<span>{{record.finishCount | progressPanel(record.allCount)}}</span>
</span>
</a-table>
// data () 中的数据
...
columns: [
{
key: 'planName',
slots: { title: 'planNameTitle' },
dataIndex: 'planName',
customRender: (value, row, index) => {
const obj = {
// <div class="col-tit"><i class="iconfont icon-tubiao-bingtu"></i>xxxxxxx</div>
children: this.$createElement(
'div',
{
class: 'col-tit',
on: {
click: () => {
this.handlePieChart(row, index)
}
},
},
[
this.$createElement(
'i',
{
class: 'iconfont icon-tubiao-bingtu'
}
),
value
]
),
attrs: {},
};
if (row.rowSpan > -1) {
obj.attrs.rowSpan = row.rowSpan;
}
return obj;
},
},
{
key: 'name',
slots: { title: 'nameTitle' },
dataIndex: 'name',
},
{
key: 'supervisor',
slots: { title: 'supervisorTitle' },
dataIndex: 'supervisor',
},
{
key: 'percentage',
slots: {title: 'percentageTitle'},
scopedSlots: { customRender: 'percentage' },
},
{
key: 'overdueCountTitle',
slots: {title: 'overdueCountTitle'}, //'过期计数',
dataIndex: 'overdueCount',
},
{
key: 'action', //"详情",
slots: {title: 'actionTitle'},
scopedSlots: { customRender: 'action' },
}
],
...