快捷導(dǎo)航

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

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

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

Ant Design Vue Table組件合并單元格

項(xiàng)目開發(fā)中，有時(shí)候需要實(shí)現(xiàn)單元格合并的需求,這里記錄一下在Ant Design Vue的實(shí)現(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: '實(shí)驗(yàn)高中', grade: '高三', class: '二班', name: '楊江'},
  { key: '6', school: '實(shí)驗(yàn)高中', grade: '高三', class: '一班', name: '陳鋒'},
  { key: '7', school: '實(shí)驗(yàn)高中', grade: '高三', class: '二班', name: '李華'},
  { key: '8', school: '實(shí)驗(yàn)高中', 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: '年級(jí)', dataIndex: 'grade', width: '25%',
    scopedSlots: { customRender: 'grade' }, align: 'center', key: 'grade',
    customRender (_, row) {
      return {
        children: row.grade,
        attrs: {
          rowSpan: row.gradeRowSpan
        }
      }
    }
  },
  {
    title: '班級(jí)', 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插槽

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

//核心是customRender這個(gè)對(duì)象
<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
?? ??? ?},
?? ?}
},

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

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

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

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

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

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

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

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

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