美文网首页
element UI 表格的行合并方法

element UI 表格的行合并方法

作者: 王康_Wang | 来源:发表于2020-03-23 17:36 被阅读0次
    <template>
      <div class="home">
        <template>
          <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
            <el-table-column v-for="(item,index) in columnList" :prop="item.prop" :label="item.label" align="center">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </template>
    <script>
    export default {
      name: 'Home',
      components: {},
      data() {
        return {
          tableData: [
            { city: '苏州', country: '玄武', gender: '男', name: '1' },
            { city: '南京', country: '江宁', gender: '男', name: '2' },
            { city: '南京', country: '江宁', gender: '女', name: '3' },
            { city: '南京', country: '江宁', gender: '男', name: '4' },
            { city: '南京', country: '鼓楼', gender: '男', name: '5' },
            { city: '南京', country: '鼓楼', gender: '男', name: '6' },
            { city: '南京', country: '秦淮', gender: '男', name: '7' },
            { city: '南京', country: '秦淮', gender: '女', name: '8' },
            { city: '南京', country: '建邺', gender: '男', name: '9' },
            { city: '南京', country: '建邺', gender: '男', name: '0' },
            { city: '盐城', country: '建邺', gender: '男', name: '2' },
            { city: '盐城', country: '建邺', gender: '女', name: '2' },
            { city: '徐州', country: '建邺', gender: '女', name: '3' },
            { city: '连云港', country: '新浦', gender: '女', name: 'aaa' },
            { city: '连云港', country: '新浦', gender: '男', name: 'aaa' },
            { city: '连云港', country: '新浦', gender: '女', name: 'bbb' },
            { city: '连云港', country: '新浦', gender: '男', name: 'ccd' },
            { city: '连云港', country: '海州', gender: '男', name: 'eee' },
            { city: '连云港', country: '海州', gender: '男', name: 'ccc' },
            { city: '连云港', country: '连云', gender: '女', name: 'aaa' },
            { city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
            { city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
            { city: '连云港', country: '赣榆', gender: '女', name: 'aaa' },
          ],
          columnList: [{
            prop: 'city',
            label: '城市'
          }, {
            prop: 'country',
            label: '区县'
          }, {
            prop: 'gender',
            label: '性别'
          }, {
            prop: 'name',
            label: '姓名'
          }],
          mergeKey: [0, 1, 2],
          mergeObj: [],
          margeStartLine: [],
          n: 0
        }
      },
      created() {
        this.mergeObj = this.getMergeObj(this.tableData, 'city')
      },
      mounted() {
        this.getMergeObj(this.tableData, 'city')
      },
      methods: {
        getMergeObj(data, key, keyIndex) {
          // startIndex, range
          let curIndex = 0
          let arr = []
          let margeStartLine = []
          for (let i = 0; i < data.length; i++) {
            arr.push(0)
            if (i == 0) {
              curIndex = 0
              margeStartLine.push(0)
            } else {
              let canMerge = false
              let count = 0
              for (let k = 0; k <= keyIndex; k++) {
                let curKey = this.columnList[k].prop
                if (data[i][curKey] == data[i - 1][curKey]) {
                  count++
                }
              }
              if (count == keyIndex + 1) {
                arr[curIndex] += 1
                if (curIndex != margeStartLine[margeStartLine.length - 1]) {
                  margeStartLine.push(curIndex)
                }
              } else {
                margeStartLine.push(i)
                curIndex = i
              }
            }
          }
          return {
            mergeArr: arr,
            margeStartLine: margeStartLine
          }
        },
    
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          for (let k = 0; k < this.mergeKey.length; k++) {
            let key = this.columnList[this.mergeKey[k]]
            if (columnIndex === this.mergeKey[k]) {
              let key = this.columnList[columnIndex].prop
              let obj = this.getMergeObj(this.tableData, key, columnIndex)
              
              let mergeArr = obj.mergeArr
              let margeStartLine = obj.margeStartLine
    
              if (margeStartLine.indexOf(rowIndex) > -1) {
                let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
                return {
                  rowspan: mergeArr[index] + 1,
                  colspan: 1
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
    
            }
          }
          if (this.mergeKey.indexOf(this.columnList[columnIndex].prop) > -1) {
            let key = this.columnList[columnIndex].prop
            // let { mergeObj, margeStartLine } = this.getMergeObj(this.tableData, key)
            if (margeStartLine.indexOf(rowIndex) > -1) {
              let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
              return {
                rowspan: mergeObj[index] + 1,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
        }
      }
    }
    
    </script>
    
    

    相关文章

      网友评论

          本文标题:element UI 表格的行合并方法

          本文链接:https://www.haomeiwen.com/subject/fyawyhtx.html