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。