快捷導(dǎo)航

vue element table表格相同名稱列合并方式

更新時間：2022年10月19日 08:47:49 作者：發(fā)根強(qiáng)勁

這篇文章主要介紹了vue element table表格相同名稱列合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element table表格相同名稱列合并

<template>
  <div>
    <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id" ref="tableDom" border>
      <el-table-column label="序號" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="分類" align="center"></el-table-column>
      <el-table-column prop="num1" label="數(shù)量1" align="center"></el-table-column>
      <el-table-column prop="num2" label="數(shù)量2" align="center"></el-table-column>
      <el-table-column prop="num3" label="數(shù)量3" align="center"></el-table-column>
      <el-table-column prop="type" label="類型" align="center"></el-table-column>
      <el-table-column prop="num4" label="數(shù)量4" align="center"></el-table-column>
      <el-table-column prop="num5" label="數(shù)量5" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tableData: [{
        name: '名稱1',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }, {
        name: '名稱2',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }, {
        name: '名稱2',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }, {
        name: '名稱3',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }, {
        name: '名稱4',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }, {
        name: '名稱4',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '連續(xù)',
        num5: '6',
        num6: '7',
      }]
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 合計
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合計'
        } else if (index === 2 || index === 7) {
          const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // table合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let data = this.tableData; //拿到當(dāng)前table中數(shù)據(jù)
      let cellValue = row[column.property]; //當(dāng)前位置的值
      let noSortArr = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6']; //不需要合并的字段（不進(jìn)行合并行的prop）
      if (cellValue && !noSortArr.includes(column.property)) {
        let prevRow = data[rowIndex - 1]; //獲取到上一條數(shù)據(jù)
        let nextRow = data[rowIndex + 1]; //下一條數(shù)據(jù)
        if (prevRow && prevRow[column.property] === cellValue) { //當(dāng)有上一條數(shù)據(jù)，并且和當(dāng)前值相等時
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) { //當(dāng)有下一條數(shù)據(jù)并且和當(dāng)前值相等時,獲取新的下一條
            nextRow = data[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  }
}
</script>
<style scoped lang="less">
</style>

對table表格相同內(nèi)容行的合并

在vue開發(fā)中會有對表格的操作，有時因為需要遍歷的情況不同，對于數(shù)據(jù)相同行處理時，使用element的table不太好實現(xiàn)，還是使用html的table標(biāo)簽！

而此時，對于相同數(shù)據(jù)行，使用rowspan進(jìn)行合并則無法更好的遍歷數(shù)據(jù)，比如我們要實現(xiàn)這樣的表格

數(shù)據(jù)格式一看，使用遍歷的話會更好實現(xiàn)，這個時候表格是這樣的

這個時候可以使用方法獲取相同內(nèi)容行，對其進(jìn)行處理，方法如下

 mergeTable() {  //table表合并相同內(nèi)容的行
      var tab = document.getElementById("subtable");
      var maxCol = 3, val, count, start;
      // var ys = "";
      for (var col = maxCol - 1; col >= 0 ; col--) {
        count = 1;
        val = "";
        for (var i = 0; i < tab.rows.length; i++) {
          if (val == tab.rows[i].cells[col].innerHTML) {
            count++;
          } else {
          if (count > 1) {
            //合并 
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) { // 
                tab.rows[j].cells[col].style.display = "none";
                tab.rows[j].removeChild(tab.rows[j].cells[col]);
            }
            count = 1;
            }
            val = tab.rows[i].cells[col].innerHTML;
          }
        }
 
          if (count > 1) { //合并，最后幾行相同的情況下 
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) {
              tab.rows[j].removeChild(tab.rows[j].cells[col]);
            }
          }
      }
    }

然后在生命周期函數(shù)這調(diào)用該方法即可實現(xiàn)對相同內(nèi)容行的合并操作！

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: