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。

posted @ 2021-07-07 09:40  爱就码上行动  阅读(1070)  评论(0编辑  收藏  举报