antd vue表格合并按钮、样式列
官方给出的表格行列合并示例:https://www.antdv.com/components/table-cn/。
示例中仅演示了合并纯文本列,本文分享一下带按钮、样式的列如何合并。
Demo效果:
原本按钮是使用插槽方式写的,由于需要合并,就模仿官方示例改写为customRender,要点在于:columns定义在data、变量使用{ }而非{{ }}、点击事件触发。整体代码如下:
<template>
<div>
<a-select v-model="selectedYear" defaultValue="" placeholder="选择年度" style="width: 150px;">
<a-select-option v-for="(item, index) in yearOptions" :value="item" :key="index">
{{ item }}
</a-select-option>
</a-select>
<br />
<div style="width: 500px;">
<a-table :columns="columns" :dataSource="dataSource" bordered rowKey="id">
</a-table>
</div>
</div>
</template>
<script>
export default {
name: 'History',
data () {
return {
selectedYear: undefined,
yearOptions: ['2021', '2020', '2019', '2018'],
columns: [
{
title: '成绩',
dataIndex: 'name',
width: '20%',
customRender: (text, record, index) => {
if (index === 0 || index === 4) {
return {
children: (<div style="font-weight: bold;">{text}</div>),
attrs: { colSpan: 3 }
}
}
return text
}
},
{
title: '年度',
width: '10%',
align: 'center',
customRender: (value, record, index) => {
const obj = {
children: this.selectedYear,
attrs: {}
}
if (index === 0 || index === 4) {
obj.attrs.colSpan = 0
}
return obj
}
},
{
title: '答题卡',
align: 'center',
customRender: (value, record, index) => {
const obj = {
children: (<a-button type="primary" icon="download" onclick={() => { this.download(record) }}> 下载 </a-button>),
attrs: {}
}
if (index === 0 || index === 4) {
obj.attrs.colSpan = 0
}
return obj
}
}
],
dataSource: [
{ id: 1, name: '小明' },
{ id: 2, name: '语文:80分' },
{ id: 3, name: '数学:90分' },
{ id: 4, name: '英语:85分' },
{ id: 5, name: '小张' },
{ id: 6, name: '语文:82分' },
{ id: 7, name: '数学:85分' },
{ id: 8, name: '英语:81分' }
]
}
},
mounted () {
this.init()
},
methods: {
init () {
this.selectedYear = this.yearOptions[0]
},
download () {
setTimeout(() => {
this.$message.success('下载完成')
}, 1000)
}
}
}
</script>
补充:
时间:2021年8月8日13点06分
今日再次遇到了a-table的合并需求,对customRender的使用有了新的理解。
示例:
{ title: '备注说明', dataIndex: 'content', customRender: (text, record, index) => { const obj = { children: <div domPropsInnerHTML={text}></div>, attrs: {} } if (index === 0) { obj.attrs.rowSpan = 2 } if (index === 1) { obj.attrs.rowSpan = 0 } return obj } }
由于ant-design是基于 React 的前端框架,所以antd of vue中很容易发现有许多react语法的踪迹,如JSX。
从示例可以发现,obj.children对标签的用法与vue使用标签的方式有所不同,比如绑定变量、监听事件。如果想实现v-for、v-html等效果,应同步参考react用法:map、domPropsInnerHTML。