美文网首页
elementUi行合并

elementUi行合并

作者: O蚂蚁O | 来源:发表于2020-04-11 11:14 被阅读0次

直接上代码


<template>
  <section>
    <section>
      <el-table
        :data="table"
        :span-method="objectSpanMethod"
        border
        style="width: 100%">
        <el-table-column
          prop="checkRoom"
          label="checkRoom"
          width="180">
        </el-table-column>
        <el-table-column
          prop="checkProject"
          label="checkProject">
        </el-table-column>
        <el-table-column
          prop="checkMoney"
          label="checkMoney">
        </el-table-column>
        <el-table-column
          prop="attention"
          label="attention">
        </el-table-column>
        <el-table-column
          prop="appointmentTime"
          :formatter="dataCh"
          label="appointmentTime">
        </el-table-column>
      </el-table>
    </section>
  </section>
</template>

<script>

export default {
  name: 'meTest',
  components: {  },
  data() {
    return {
      ruleForm : {},
      msg : 'jiang',
      curFilterChannel: null, // 当前筛选的channel
      leftWidth: '300px',
      treeIsCollapse: false,
      curActiveNode: {
        lfcode: 'dff'
      },
      table: [{
        id: '1',
        checkRoom: 'CTROOM',
        checkProject: '300.22',
        checkMoney: '300.22',
        attention: '检查前空腹',
        appointmentTime: ''
      },{
        id: '1',
        checkRoom: 'CTROOM',
        checkProject: '颈椎MRICT1',
        checkMoney: '303.22',
        attention: '检查前空腹',
        appointmentTime: ''
      },{
        id: '1',
        checkRoom: 'CTROOM',
        checkProject: '颈椎MRICT22',
        checkMoney: '340.22',
        attention: '检查前空腹',
        appointmentTime: '2019-5-29 10:30'
      },{
        id: '1',
        checkRoom: 'DR',
        checkProject: '鼻骨',
        checkMoney: '500.22',
        attention: '检查前',
        appointmentTime: '2019-5-29 9:30'
      }]
    }
  },
  created() {
    this.table = this.mergeTableRow(this.table, ['checkRoom', 'attention', 'appointmentTime'])
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column['property'] + '-span'
      if(row[span]){
          return row[span]
      }
    },
    mergeTableRow(data, merge) {
      if (!merge || merge.length === 0) {
        return data
      }
      merge.forEach((m) => { // 'checkRoom'
        const mList = {}
        data = data.map((v, index) => {
          const rowVal = v[m]
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            mList[rowVal]['num']++
            mList[rowVal]['newIndex']++
            data[mList[rowVal]['index']][m + '-span'].rowspan++
            v[m + '-span'] = {
              rowspan: 0,
              colspan: 0
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
            v[m + '-span'] = {
              rowspan: 1,
              colspan: 1
            }
          }
          return v
        })
      })
      return data
    }
  }
}
</script>

<style lang="less">
</style>

相关文章

网友评论

      本文标题:elementUi行合并

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