ant-design-vue版本：~1.3.8

需求：表格實現跨行合併，並且在合併完的單元格中顯示圖片

效果圖：

原始碼：

export default {
  data() {
    return {
      pic95: require('@/assets/produit/95.png'),pic99: require('@/assets/produit/99.png'),varTable: {
        cloumns: [
          {
            title: '置信度',dataIndex: 'confidence ',class: 'confidence',customRender: (value,row,index) => {
              let obj = {
               children: '',attrs: {}
              }
              if (index === 0) {
               obj = {
                children: <div class="risk-pic"><img src={this.pic95} /></div>,attrs: { rowSpan: 4 }
               }
              }
              if (index === 4) {
                obj = {
                children: <div class="risk-pic"><img src={this.pic99} /></div>,attrs: { rowSpan: 4 }
                }
              }
              if ([1,2,3,5,6,7].indexOf(index) !== -1) {
               obj.attrs.colSpan = 0
              }
              return obj
            }
          },{
           title: '天數',dataIndex: 'window_length',width: '25%',customRender: (text) => text + '日'
          },{
           title: 'VaR(萬元)',dataIndex: 'var',width: '25%'
          },{
           title: 'VaR/淨資產',dataIndex: 'var_rate',customRender: (text) => fmtRatio(text,2)
          }
        ],data: [
          {window_length: 1,var: 151.69,var_rate: 0.01858},{window_length: 5,var: 298.94,var_rate: 0.03661},{window_length: 10,var: 416.70,var_rate: 0.05104},{window_length: 20,var: 576.04,var_rate: 0.07055},{window_length: 1,var: 370.64,var_rate: 0.045398},var: 463.33,var_rate: 0.056751},var: 632.91,var_rate: 0.077523},var: 1233.95,var_rate: 0.15114}
        ]
      }
    }
  },methods:{
    // 百分數設定
    fmtRatio(val,index,def) {
      // index預設值為2
      var index = arguments[1] ? arguments[1] : 2
      if (val == null || isNaN(val) || typeof (val) === 'string' && val === '') {
        return def || '--'
      }
      var ratio = (val * 100).toFixed(index)
      return ratio + '%'
    }
  }
}

匯入圖片的方式還有

import pic95 from '@/assets/produit/95.png'

import pic99 from '@/assets/produit/99.png'

如果有問題，歡迎提出，一起交流~~！

補充知識：ant-design vue table 可選列、自定義列實現

實現ant-design for vue 自定義列實現。點選按鈕，彈窗顯示所有列的checkbox，選擇checkbox，確定即可實現自定義列。先上程式碼

<script>
/**
 * 該元件為實現table可選列。
 * 具體操作見下方註釋。
 * 全部整合原a-table功能，使用方式與原a-table完全相同，擴充套件增加了可選列功能
 * 該元件已註冊至全域性，使用方式只需將a-table變為zyx-table即可，等等一系列原寫法不變，即可增加該功能.
 * 採用rander函式模式寫，為了實現a-table中slot可動態。
 */
export default {
 name: 'Table',data () {
  return {
   modalVisible: false,// 彈窗
   columns: [],// 表格的列，根據條件來操作該欄位
   selectList: [],// 已選擇的列
   temporarySelectData: [],// 暫時選擇的列，點選checkbox暫存到該欄位，點確定同步到selectList
   checkboxList: []// checkbox的list，也做總資料來使用
  }
 },mounted () {
  /**
   * 掛載後，將原columns複製到本頁columns，checkboxList
   *     將selectList賦值全選狀態
   */
  this.columns = this.deepClone(this.$attrs.columns)
  this.checkboxList = this.deepClone(this.$attrs.columns)
  this.selectList = this.columns.map(ele => ele.dataIndex)
 },methods: {
  /**
   * 開啟modal，將checkbox預設值或者是選擇值（暫存）重新賦值
   */
  handelOpenSelect () {
   this.temporarySelectData = this.deepClone(this.selectList)
   this.modalVisible = true
  },/**
   * 點選確定，將暫存值賦值（temporarySelectData）給已選擇的列（selectList）
   * 將列（columns）根據已選擇的列（selectList）篩選出來
   */
  handleOk () {
   this.selectList = this.deepClone(this.temporarySelectData)
   this.modalVisible = false
   this.columns = this.checkboxList.filter(ele => this.selectList.includes(ele.dataIndex))
  },handleCancel () {
   this.modalVisible = false
  },handelChange (e) {
   this.temporarySelectData = this.deepClone(e)
  },deepClone (target) {
   let result
   if (typeof target === 'object') {
    if (Array.isArray(target)) {
     result = []
     for (const i in target) {
      result.push(this.deepClone(target[i]))
     }
    } else if (target === null) {
     result = null
    } else if (target.constructor === RegExp) {
     result = target
    } else {
     result = {}
     for (const i in target) {
      result[i] = this.deepClone(target[i])
     }
    }
   } else {
    result = target
   }
   return result
  }
 },render () {
  const props = { ...this.$attrs,...this.$props,...{ columns: this.columns } }
  const on = { ...this.$listeners }

  const slots = Object.keys(this.$slots).map(slot => {
   return (
    <template slot={slot}>{ this.$slots[slot] }</template>
   )
  })

  const table = (
   <a-table props={props} scopedSlots={ this.$scopedSlots } on={on} ref="zyxTable">
    {slots}
   </a-table>
  )

  const changeDiv = (
   <a-button class="select-columns" size="small" onClick={this.handelOpenSelect}>列</a-button>
  )

  const checkboxArr = []
  for (let i = 0; i < this.checkboxList.length; i++) {
   checkboxArr.push(<a-col span={8}><a-checkbox value={this.checkboxList[i].dataIndex}>{this.checkboxList[i].title}</a-checkbox></a-col>)
  }
  const modal = (
   <a-modal
    title="設定列"
    visible={this.modalVisible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}>
    <a-checkbox-group value={this.temporarySelectData} onChange={this.handelChange}>
     <a-row>
      {checkboxArr}
     </a-row>
    </a-checkbox-group>
   </a-modal>
  )

  return (
   <div class="zyx-table">
    { table }
    { changeDiv }
    { modal }
   </div>
  )
 }
}
</script>
<style lang="less" scoped>
.zyx-table{
 position: relative;
 margin-top: 20px;

 .select-columns{
  position: absolute;
  right: 0;
  top: -30px;
 }
}

.ant-row{
 width: 100%;

 .ant-col-8{
  margin-bottom: 10px;
 }
}

.ant-checkbox-group{
 width: 100%;
}
</style>

該元件二次封裝了a-table，整合原a-table所有方法

使用方法，在全域性註冊該元件，將原a-table替換為zyx-table即可實現。

將原標籤替換為rander函式，是為了實現slot動態傳入的效果。

有疑問或者更好的建議，歡迎光臨思密達。github傳送門

以上這篇antd vue table跨行合併單元格,並且自定義內容例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。