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。