基于elementUI自定义表格

这个是基于elelmentUI,自定义表格，写了很久了，最近才整理。
自定义表格可以根据数据自动生成表头，多级表头，列
约定的数据格式如下：

/** 数据格式
   *
   headList:[
   {
     prop:"date",
     label:"日期",
     width:"150",
     url:'',
     path:'',
     yl:'',
     children:[]
   },
   {
     prop:"",
     label:"地址",
     width:"",
     url:'',
     path:'',
     yl:'',
     children:[{
       prop:"province",
       label:"省份",
       width:"120",
       url:'',
       path:'',
       yl:'',
     },
       {
         prop:"zip",
         label:"邮编",
         width:"120",
         url:'',
         path:'',
         yl:'',
       }
     ]
   }
   ],
   tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
   *
   */

HeadTable.vue

<template>
  <el-table
    v-loading.iTable="loading"
    :data="tableDatas"
    :row-style="selectedRowStyle"
    :row-class-name="rowStyle"
    style="width: 100%"
    :height="height"
    stripe
    border
    @row-click="scaleRow"
    @row-dblclick="dblclick"
    @sort-change="sortchange"
  >
    <!--:span-method="objectSpanMethod"-->
    <template>
      <el-table-column
        v-for="(column,index) in headList"
        :key="index"
        :label="column.label"
        align="center"
        :fixed="column.gd && column.gd.indexOf(column.prop)>-1 "
        :width="column.width"
        show-overflow-tooltip
        :prop="column.prop"
        :sortable="(!(column.children && column.children.length !== 0 || column.label === '序号' || column.label === '操作' || column.label === '得分组成'))?'custom':false"
      >
        <template v-if="column.children && column.children.length !== 0">
          <el-table-column
            v-for="(column1,index1) in column.children"
            :key="index1"
            align="center"
            :label="column1.label"
            :width="column1.width"
            show-overflow-tooltip
            :prop="column1.prop"
            sortable="custom"
          >
            <template slot-scope="scope">
              <div v-if="(column1.hasOwnProperty('path')&&column1.path&&column1.path.length!==0)||(column1.hasOwnProperty('url')&&column1.url&&column1.url.length!==0)">
                <el-button
                  style="border: none;padding: 0;"
                  :style="[{color:column1.higlight!=='#464646'?column1.higlight:''}]"
                  class="cell_span"
                  :class="clickedRow==scope.row.index?'scale-row':''"
                  @click="toputh(column1,scope.row)"
                >{{ scope.row[(column1.prop+(column1.yl?column1.yl:''))] }}</el-button>
              </div>
              <div v-else>
                <span :style="[{color:column1.higlight}]">{{ scope.row[(column1.prop+(column1.yl?column1.yl:''))] }}</span>
              </div>
            </template>
          </el-table-column>
        </template>
        <template slot-scope="scope">
          <div v-if="(column.hasOwnProperty('path')&&column.path&&column.path.length!==0)||(column.hasOwnProperty('url')&&column.url&&column.url.length!==0)">
            <el-button
              style="border: none;padding: 0;"
              :style="[{color:column.higlight!=='#464646'?column.higlight:''}]"
              class="cell_span"
              :class="clickedRow==scope.row.index?'scale-row':''"
              @click="toputh(column,scope.row)"
            >{{ scope.row[(column.prop+(column.yl?column.yl:''))] }}</el-button>
          </div>
          <div v-else>
            <span :style="[{color:column.higlight}]">{{ scope.row[(column.prop+(column.yl?column.yl:''))] }}</span>
          </div>
        </template>
      </el-table-column>
    </template>>
  </el-table>
</template>

<script>
/**
   * @author wangligang
   * @date 2020/8/4
   * @Description:
   * @update by: 表格组件
   *
   *
   /

const evalData = (data) => {
  const tmp = []
  Array.from(data).forEach((row, index) => {
    if (!Array.isArray(row)) {
      tmp.push({ no: index + 1, ...row })
    } else {
      //
    }
  })
  return tmp
}

export default {
  props: {
    tableData: {
      type: [Array, Object],
      required: true
    },
    headList: {
      type: Array,
      default: () => []
    },
    query: {
      type: Object,
      default: () => {}
    },
    height: {
      type: String,
      default: () => 'calc(100vh - 220px)'
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      clickedRow: -1,
      spanArr: [],
      pos: 0
    }
  },
  computed: {
    // 格式化表格数据
    tableDatas: function() {
      const tmp = !Array.isArray(this.tableData) ? [this.tableData] : this.tableData
      this.getSpanArr(evalData(tmp))
      return evalData(tmp)
    }
  },
  methods: {
    getSpanArr(data) {
      this.spanArr = []
      this.pos = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].nsrsbh && data[i].nsrsbh === data[i - 1].nsrsbh) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    dblclick(row, column, event) {
      let data = {}
      let Y = false
      this.headList.map(item => {
        if (item.label === '操作') {
          data = item
          Y = true
        } else if (item.url && item.url.length !== 0) {
          Y = true
        }
      })
      if (Y) {
        this.$emit('dblclick', row, data)
      }
    },
    toputh(row, data) {
      if (row.path && row.path.length !== 0) {
        this.$router.push({ path: row.path, query: { ...this.query }})
      } else if (row.url && row.url.length !== 0) {
        this.$emit('urlClick', row, data)
      }
    },
    scaleRow(row) {
      this.clickedRow = row.index
    },
    rowStyle({ rowIndex }) {
      if (this.clickedRow === rowIndex) {
        return 'scale-row'
      }
    },
    selectedRowStyle({ row, rowIndex }) {
      row.index = rowIndex
    },
    sortchange({ column, prop, order }) {
      this.$emit('sortchange', { column, prop, order })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!row.nsrsbh) {
        this.obj = { row, column, rowIndex, columnIndex }
        return {
          rowspan: 1,
          colspan: 1
        }
      }
      if (row.columnspan.indexOf(column.property) > -1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    .scale-row{
      font-size:15px;
      font-weight:600;
      background-color:#f5f7fa;
      transition:all .3s ease-in-out;
    }
    .bg-disable{
      background:rgba(224,224,224,.3);
    }
    .bg-active{
      background: #bccbe4;
    }
  }
</style>

使用方式
引入组件

<HeadTable :headList="headList" :tableData="tableData"></HeadTable>