guoju0808/refer/gr-table.vue

<template>
  <div>
    <el-table  ref="mesSysTable" :data="data" :border="border" :height="height"
        :max-height="maxHeight" :stripe="stripe" :size="size" :fit="fit" :show-header="showHeader"
        :highlight-current-row="highlightCurrentRow" :highlight-selection-row="highlightSelectionRow"
        :current-row-key="currentRowKey" :row-class-name="rowClassName" :row-style="rowStyle" :cell-class-name="cellClassName"
        :cell-style="cellStyle" :header-row-class-name="headerRowClassName" :header-row-style="headerRowStyle"
        :header-cell-class-name="headerCellClassName" :header-cell-style="headerCellStyle" :row-key="rowKey"
        :empty-text="emptyText" :default-expand-all="defaultExpandAll" :expand-row-keys="expandRowKeys"
        :default-sort="defaultSort" :tooltip-effect="tooltipEffect" :show-summary="showSummary" :summary-method="summaryMethod"
        :sum-text="sumText" :span-method="spanMethod" :select-on-indeterminate="selectOnIndeterminate" :indent="indent"
        :lazy="lazy" :load="load" :tree-props="treeProps"
        @select="(evt) => $emit('select',evt)" @select-all="(evt) => $emit('select-all',evt)"
        @selection-change="(evt) => $emit('selection-change',evt)" @cell-mouse-enter="(evt) => $emit('cell-mouse-enter',evt)"
        @cell-mouse-leave="(evt) => $emit('cell-mouse-leave',evt)" @cell-click="(evt) => $emit('cell-click',evt)"
        @cell-dblclick="(evt) => $emit('cell-dblclick',evt)" @row-click="(evt) => $emit('row-click',evt)"
        @row-contextmenu="(evt) => $emit('row-contextmenu',evt)" @row-dblclick="(evt) => $emit('row-dblclick',evt)"
        @header-click="(evt) => $emit('header-click',evt)" @header-contextmenu="(evt) => $emit('header-contextmenu',evt)"
        @sort-change="(evt) => $emit('sort-change',evt)" @filter-change="(evt) => $emit('filter-change',evt)"
        @current-change="(evt) => $emit('current-change',evt)" @header-dragend="(evt) => $emit('header-dragend',evt)"
        @expand-change="(evt) => $emit('expand-change',evt)" >
      <el-table-column type="expand" v-if="slight && slight[0]">
        <template slot-scope="scope">
          <el-descriptions :column="1" style="margin: 0 20px;">
            <el-descriptions-item v-for="(item, index) in getDataList(scope.row)" :label="item.label" :key="index">{{item.value}}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <slot>
      </slot>
    </el-table>
    
  </div>
</template>
<script>
export default {
  props: ["data", "major","border","height","maxHeight","stripe","size","fit","showHeader",
   "highlightCurrentRow","highlightSelectionRow","currentRowKey","rowClassName","rowStyle","cellClassName",
   "cellStyle","headerRowClassName", "headerRowStyle","headerCellClassName","headerCellStyle",
   "rowKey", "emptyText","defaultExpandAll", "expandRowKeys","defaultSort","tooltipEffect","sumText","showSummary",
   "summaryMethod", "spanMethod","selectOnIndeterminate","indent","lazy","load","treeProps",
  ],
  data() {
    return {
      slight: null,
      mainCol: this.major,
      rows: null,
    };
  },
  methods: {
    getDataList(row) {
      return Object.keys(row)
      .filter((key) => this.slight.some((s) => s.prop == key)).map((key) => {
          return {
            label: this.slight.find((s) => s.prop == key).label,
            value: row[this.slight.find((s) => s.prop == key).prop],
          };
        });
    },
    clearSelection(...args) { this.$refs['mesSysTable'].clearSelection(...args)},
    toggleRowSelection (...args) {this.$refs['mesSysTable'].toggleRowSelection(...args)},
    toggleAllSelection (...args) { this.$refs['mesSysTable'].toggleAllSelection(...args)},
    toggleRowExpansion (...args) { this.$refs['mesSysTable'].toggleRowExpansion(...args)},
    setCurrentRow (...args) { this.$refs['mesSysTable'].setCurrentRow(...args)},
    clearSort (...args) { this.$refs['mesSysTable'].clearSort(...args)},
    clearFilter (...args){ this.$refs['mesSysTable'].clearFilter(...args)},
    doLayout (...args){ this.$refs['mesSysTable'].doLayout(...args)},
    sort (...args){ this.$refs['mesSysTable'].sort(...args)},

    initData() {
      let length = this.$slots.default.length, rows = this.$slots.default;
      // if (window.innerWidth < 768) {   //判断PDA
      if (!this.major || !this.major[0]) { //如果没有指定重要的列，默认第一列（一般是名称）和最后一列（一般是操作）
        this.mainCol = [rows[0].componentOptions.propsData.prop,rows[length-1].componentOptions.propsData.prop]
      }
      this.slight = rows.filter((item) => { //筛选不重要的列，展示到expand中
          return !(this.mainCol.some((main) => {
            return main == item.componentOptions.propsData.prop;
          }));
        }).map((item) => {
          return item.componentOptions.propsData;
        });
        this.rows = rows.filter((item) => { //去掉不重要的列
        return this.mainCol.some((main) => {
          return main == item.componentOptions.propsData.prop;
        }) || !item.componentOptions.propsData.prop;
      });
      this.$slots.default = this.rows;
    // }
    }
  },

  created() {
    this.initData();
  },
  updated() {
    console.log("updated!!!!");
    // this.initData();  
    // this.$slots.default = this.rows;
  }
};
</script>
<style scoped lang="scss">

::v-deep th.el-table__cell {
 background: #0ECD4916 !important;
   font-family: PingFangSC-Medium;
  // font-size: 16px;
  color: #323233;
  line-height: 22px;
  font-weight: 700;
}

::v-deep .el-table__cell {
 padding: 8px !important;
}
</style>