码迷,mamicode.com
首页 > 其他好文 > 详细

实操记录之-----Ant Design of Vue 增强版动态合并单元格,自动根据数据进行合并,可自定义横纵向合并

时间:2020-03-21 18:11:16      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:合并   for   com   turn   ble   cin   compute   asc   位置   

前几天搞了个简易版的动态合并单元格

但是需求有变化,就只能稍微改改了~~

欢迎路过的各位大佬指出我代码的问题~~~~

另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生

<template>
  <page-view :title="title">
    <h1>第一種數據結構,前端渲染</h1>
    <div class="snall-table-spacing">
      <a-table
        :columns="columns"
        :dataSource="dataArr"
        row-key="id"
        :scroll="{x:5900, y: 500 }"
        bordered
        :pagination="false"
      >
        <template slot="name" slot-scope="text">
          <a href="javascript:;">{{ text }}</a>
        </template>
      </a-table>
    </div>
  </page-view>
</template>
<script>
import { PageView } from @/layouts
export default {
  // name: ‘paaaaaaaTest‘,
  components: {
    PageView
  },
  data() {
    return {
      renderContent: function() {},
      countArr: [],
      dataArr: [
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: paaaaaaa,
          um: 0.3um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: paaaaaaa,
          um: 0.5um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: paaaaaaa,
          um: 1.0um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: paaaaaaa,
          um: 5.0um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: tttttttt,
          um: ‘‘,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: dddd,
          paaaaaaa: hehehehehe,
          um: ‘‘,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: paaaaaaa,
          um: 0.3um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: paaaaaaa,
          um: 0.5um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: paaaaaaa,
          um: 1.0um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: paaaaaaa,
          um: 5.0um,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: tttttttt,
          um: ‘‘,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        },
        {
          date: 2020/03/20,
          myaaaaaa: aaaaaaaaa,
          floor: bbbbb,
          myleeeeeee: cccccc,
          ssssttt: wwwwwww,
          paaaaaaa: hehehehehe,
          um: ‘‘,
          lsl: 3000,
          usl: 4000,
          l_0: 27400,
          l_1: 27420,
          l_2: 2742300,
          l_3: 27r400,
          l_4: 27df400,
          l_5: 274f00,
          l_6: 274400,
          l_7: 27400,
          l_8: 273400,
          l_9: 27rt400,
          l_10: 27er400,
          l_11: 27400,
          l_12: 2765400,
          l_13: 2745400,
          l_14: 27400,
          l_15: 27400,
          l_16: 27400,
          l_17: 27400,
          l_18: 27400,
          l_19: 274500,
          l_20: 274400,
          l_21: 274400,
          l_22: 275400,
          l_23: 274600,
          l_24: 27400,
          l_25: 274500,
          l_26: 274500,
          l_27: 274500,
          l_28: 274500,
          l_29: 275400,
          l_30: 274500,
          l_31: 274500,
          l_32: 274500,
          l_33: 274500,
          l_34: 274400,
          l_35: 275400,
          l_36: 2744500,
          l_37: 27400,
          l_38: 27456400,
          l_39: 276546400,
          l_40: 27400,
          l_41: 27400,
          l_42: 27400,
          l_43: 27400,
          l_44: 2740540,
          l_45: 275400,
          l_46: 2754040,
          l_47: 274500,
          l_48: 274400
        }
      ],
      columns: []
    }
  },
  methods: {
    // 這個函數作用是輸入表格內容data以及表頭裡的dataIndex,返回一個需要合併的數組,只是單個的列需要合併的1
    conutfun(dataIndex) {
      var dataArr1 = this.dataArr
      var myArray = new Array(dataArr1.length) // 聲明一個數組,每個對應保存的是rowspan的值
      // console.log(dataArr1)
      var myKeyName = ‘‘ // 保存上一個值
      var count = 0 // 保存相同的值出現的次數
      var startIndex = 0 // 保存第一次這個值出現的位置
      for (var i = 0; i < dataArr1.length; i++) {
        var val = dataArr1[i][dataIndex]
        if (i === 0) {
          myKeyName = val
          count = 1
          myArray[0] = 1
        } else {
          if (val === myKeyName) {
            count++
            myArray[startIndex] = count
            myArray[i] = 0
          } else {
            count = 1
            myKeyName = val
            startIndex = i
            myArray[i] = 1
          }
        }
      }
      // console.log(myArray)
      return myArray
    },
    // 這個函數作用是輸入表格內容data以及表頭裡的dataIndex,返回一個需要合併的數組,只是單個的列需要合併的2
    // 這個函數的作用是把表格的表頭部分輸入,然後生成一個大對象,對象的key是對應的表格內容列名,數組的value對應的表格合併的列1
    // Name: (8) [6, 0, 0, 0, 0, 0, 1, 1]
    // age: (8) [1, 1, 1, 1, 4, 0, 0, 0]
    // age3: (8) [6, 0, 0, 0, 0, 0, 2, 0]
    // age4: (8) [5, 0, 0, 0, 0, 3, 0, 0]
    // agetwo: (8) [8, 0, 0, 0, 0, 0, 0, 0]
    // oid: (8) [1, 1, 1, 1, 1, 1, 1, 1]
    countArrFun() {
      var myNewArray = {}
      for (var i = 0; i < this.columns.length; i++) {
        const _ = this.columns[i]
        const arr = this.conutfun(_.dataIndex)
        myNewArray[_.dataIndex] = arr
      }
      // console.log(myNewArray)
      return myNewArray
    },
    // 這個函數的作用是把表格的表頭部分輸入,然後生成一個數組,數組的key是對應的表格內容列名,數組的value對應的表格合併的列2
    setColumns() {
      // 聲明一個對象,key是表格的標題,value 是表格每列的寬度
      var myObj = {
        date: 200,
        myaaaaaa: 100,
        floor: 100,
        myleeeeeee: 100,
        ssssttt: 100,
        paaaaaaa: 100,
        um: 100,
        lsl: 100,
        usl: 100,
        l_0: 100,
        l_1: 100,
        l_2: 100,
        l_3: 100,
        l_4: 100,
        l_5: 100,
        l_6: 100,
        l_7: 100,
        l_8: 100,
        l_9: 100,
        l_10: 100,
        l_11: 100,
        l_12: 100,
        l_13: 100,
        l_14: 100,
        l_15: 100,
        l_16: 100,
        l_17: 100,
        l_18: 100,
        l_19: 100,
        l_20: 100,
        l_21: 100,
        l_22: 100,
        l_23: 100,
        l_24: 100,
        l_25: 100,
        l_26: 100,
        l_27: 100,
        l_28: 100,
        l_29: 100,
        l_30: 100,
        l_31: 100,
        l_32: 100,
        l_33: 100,
        l_34: 100,
        l_35: 100,
        l_36: 100,
        l_37: 100,
        l_38: 100,
        l_39: 100,
        l_40: 100,
        l_41: 100,
        l_42: 100,
        l_43: 100,
        l_44: 100,
        l_45: 100,
        l_46: 100,
        l_47: 100,
        l_48: 100
      }
      // 聲明一個新的數組,用來放新生成的colums
      var newarr = []
      Object.keys(myObj).forEach((_, i) => {
        // 如果表格標題不是這幾個字段的話,就設置不用合併單元格,正常
        if ([date, myaaaaaa, floor, myleeeeeee, ssssttt, paaaaaaa, um].indexOf(_) < 0) {
          newarr.push({
            title: _,
            dataIndex: _,
            width: myObj[_],
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (this.countArr[_]) {
                obj.attrs.rowSpan = 1
              }
              return obj
            }
          })
        } else if (_ === paaaaaaa) {
          // 如果表格標題是paaaaaaa的話,就設置如果內容是hehehehehe或者tttttttt向右合併,
          // 並且如果有重複字段的話,向下合併
          newarr.push({
            title: _,
            dataIndex: _,
            width: myObj[_],
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (this.countArr[_]) {
                obj.attrs.rowSpan = this.countArr[_][index]
              }
              // 自定義需求,如果表內容是這幾個,就橫向合併一個單元格,需要設置兩列的內容
              if ([hehehehehe, tttttttt].indexOf(value) !== -1) {
                obj.attrs.colSpan = 2
              }
              // 自定義需求,如果表內容是這幾個,就橫向合併一個單元格,需要設置兩列的內容
              return obj
            }
          })
        } else if (_ === um) {
          // 如果表格標題是um的話,就設置如果內容為空,就向右合併為0需要配合上一個,
          // 並且如果有重複字段的話,向下合併
          newarr.push({
            title: _,
            dataIndex: _,
            width: myObj[_],
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (this.countArr[_]) {
                obj.attrs.rowSpan = this.countArr[_][index]
              }
              // 自定義需求,如果表內容是這幾個,就橫向合併一個單元格,需要設置兩列的內容
              if (!value) {
                obj.attrs.colSpan = 0
              }
              // 自定義需求,如果表內容是這幾個,就橫向合併一個單元格,需要設置兩列的內容
              return obj
            }
          })
        } else {
          // 並且如果有重複字段的話,向下合併
          newarr.push({
            title: _,
            dataIndex: _,
            width: myObj[_],
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (this.countArr[_]) {
                // 向下合併
                obj.attrs.rowSpan = this.countArr[_][index]
              }
              return obj
            }
          })
        }
      })
      this.columns = newarr
    }
  },
  mounted() {
    this.setColumns()
    this.countArr = this.countArrFun()
  },
  computed: {
    title() {
      return this.$route.meta.title
    }
  }
}
</script>
<style lang="less" scoped>
@import url(‘./common-assets/index.less‘);
</style>

 

实操记录之-----Ant Design of Vue 增强版动态合并单元格,自动根据数据进行合并,可自定义横纵向合并

标签:合并   for   com   turn   ble   cin   compute   asc   位置   

原文地址:https://www.cnblogs.com/sugartang/p/12540512.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!