快捷導(dǎo)航

Ant Design Vue Table組件合并單元格方式

更新時間：2023年04月20日 09:39:41 作者：木藍(lán)茶陌*_*

這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Ant Design Vue Table組件合并單元格

項目開發(fā)中，有時候需要實現(xiàn)單元格合并的需求,這里記錄一下在Ant Design Vue的實現(xiàn)。

<template>
  <div>
    <a-table bordered :data-source="dataSource" :columns="columns"></a-table>
  </div>
</template>
<script>
const dataSource = [
  { key: '1', school: '林州一中', grade: '高一', class: '二班', name: '徐強(qiáng)' },
  { key: '2', school: '林州一中', grade: '高一', class: '一班', name: '林東'},
  { key: '3', school: '林州一中', grade: '高一', class: '二班', name: '李丹'},
  { key: '4', school: '林州一中', grade: '高二', class: '二班', name: '劉康'},
  { key: '5', school: '實驗高中', grade: '高三', class: '二班', name: '楊江'},
  { key: '6', school: '實驗高中', grade: '高三', class: '一班', name: '陳鋒'},
  { key: '7', school: '實驗高中', grade: '高三', class: '二班', name: '李華'},
  { key: '8', school: '實驗高中', grade: '高四', class: '二班', name: '趙銘'}
]

const columns = [
  {
    title: '學(xué)校', dataIndex: 'school', width: '25%',
    scopedSlots: { customRender: 'school' }, align: 'center', key: 'school',
    customRender (_, row) {
      return {
        children: row.school,
        attrs: {
          rowSpan: row.schoolRowSpan
        }
      }
    }
  },
  {
    title: '年級', dataIndex: 'grade', width: '25%',
    scopedSlots: { customRender: 'grade' }, align: 'center', key: 'grade',
    customRender (_, row) {
      return {
        children: row.grade,
        attrs: {
          rowSpan: row.gradeRowSpan
        }
      }
    }
  },
  {
    title: '班級', dataIndex: 'class', width: '25%',
    scopedSlots: { customRender: 'class' }, align: 'center'
  },
  {
    title: '姓名', dataIndex: 'name', width: '25%',
    scopedSlots: { customRender: 'name' }, align: 'center'
  }
]

export default {
  name: 'TableMerge',
  data () {
    return {
      dataSource,
      columns
    }
  },
  methods: {
    // 合并單元格
    rowSpan (key, data) {
      const arr = data
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = data.filter(item => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0
            }))
          )
          return result
        }, [])
      return arr
    },
    // 表格合并
    mergeRowCell (data) {
      let tableData = this.rowSpan('school', data)
      tableData = this.rowSpan('grade', tableData)
      this.dataSource = tableData
    }
  },
  mounted () {
    this.mergeRowCell(this.dataSource)
  }
}
</script>

合并前：

合并第一列：

合并第二列：

Ant-vue table的單元格合并已經(jīng)使用自己的slot插槽

之前在做一個ant-design的項目的時候，遇到一個單元格合并的問題，簡直頭疼，其實在ant中進(jìn)行簡單的內(nèi)容合并單元格，其實很容易也很方便，最簡單的凡是就是在a-table-column標(biāo)簽中進(jìn)行綁定一個function，代碼如下(由于之前比較喜歡template的方式，所以下面都是template的方式進(jìn)行代碼展示，js的數(shù)據(jù)方式邏輯是一樣的)：

//核心是customRender這個對象
<a-table-column
data-index="logisticObj"?
width="150px"?
:customRender="mergeTable" />
//js
//children是返回的內(nèi)容，attrs里面是合并的單元格公式，后面的數(shù)字是代表幾行/列 ，如果被合并了的未知就用0進(jìn)行占位
mergeTable(text, record, index) {
?? ?return {
?? ??? ?children: text，
?? ??? ?attrs: {
?? ??? ??? ?rowSpan:1
?? ??? ?},
?? ?}
},

到這里一些簡單的合并什么的基本上都能進(jìn)行處理了。

接下來難點來了，我們經(jīng)常會在column中進(jìn)行設(shè)置一個自己的插槽，但是貌似這這里設(shè)置一個插槽并不會進(jìn)行渲染，親測過很多次，返回的都是children中的內(nèi)容。

針對這個，特意去了解了下源碼中的要求，這里只能插入 jsx 語法的代碼片段。如果是react開發(fā)的人，應(yīng)該對這個不默認(rèn)，但是vue中用的 jsx 還是相對較少的，比如返回一個鏈接：

return {
?? ??? ?children: <a>text</a>，
?? ??? ?// 一個div ? <div>text<div>
?? ??? ?//一個js處理了的內(nèi)容 ? <div>{text.length}</div>
?? ??? ?//一個html的代碼字符串 <span domPropsInnerHTML = { htmlInfoStr }></span>
?? ??? ?//剩下的html代碼等類似
?? ??? ?attrs: {
?? ??? ??? ?rowSpan:1
?? ??? ?},
?? ?}

通過上面的，簡單的類似于slot的使用方式也能進(jìn)行渲染了，使用真是的slot研究了一段時間，貌似沒有研究成功，如果有人有了結(jié)果，可以私信@我一下，互相學(xué)習(xí)一下。

上面這些都是一個簡單的渲染方式，以及渲染的內(nèi)容替換等，真正讓我頭疼的是，如果合并的是一個按鈕組或者帶有事件的東東，這個怎么弄？

踩了一路坑，得到了一種方法，廢話不說了，代碼如下

?? ?children : (
?? ??? ?<div>
?? ??? ??? ?<div class=" spanLink"?
?? ??? ??? ?onClick={ () => this.yourFunction(a,b,c,d)}>
?? ??? ??? ?一個帶有點擊事件的template
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)

這里重點的是只能用純 jsx 語法進(jìn)行編寫，事件推薦使用括號函數(shù)進(jìn)行帶入，參數(shù)正常傳遞就可以了。