basic-table.vue

<!-- 基础表格（表格 + 分页） -->
<template>
    <div class="basic-table">
      <el-table 
        ref="basicTable"
      height="100%" 
      :data="tabVue.TableData" 
      :highlight-current-row="tabVue.TableAttributes.highlightCurrentRow"
      :stripe="tabVue.TableAttributesConfig.stripe"
      :size="tabVue.TableAttributesConfig.size"
      :border="tabVue.TableAttributesConfig.border"
      :row-class-name="tabVue.TableAttributes.rowClassName"
      :cell-class-name="tabVue.TableAttributes.cellClassName"
      :expand-row-keys="tabVue.TableExpands"
            :row-key="tabVue.getRowKeys"
      :tree-props="tabVue.TableAttributes.treePros"
      @selection-change="tabVue.tableSelectionChange"
      @sort-change="tabVue.tableSortChange"
      @row-click="tabVue.tableRowClick"
      @row-dblclick="tabVue.rowDblClick"
      @expand-change="tabVue.getRowDetail">
      <!-- 展开行 -->
      <el-table-column>
        <template slot-scope="props">
            <slot name="tableRowDetail" :row="props.row">
            <div class="el-table-detailBox">
              <div class="table-detailBox-content">
                <span class="table-detailBox-title">{{ tabVue.TableController.rowDetail.title }}</span>
                <div class="table-detailBox-txt">{{ tabVue.ExpandsDetailMap[tabVue.getRowKeys(props.row)] }}</div>
                </div>
            </div>
            </slot>
                </template>
      </el-table-column>
            <!-- 复选框 -->
            <el-table-column v-if="tabVue.TableAttributes.hasSelection" type="selection" width="55" :selectable="tabVue.tableSelectable"></el-table-column>
            <el-table-column>
        v-for="(item, index) in tabVue.TableColumnsFilter"
        :key="`${item.pageColumnName}-${index}`"
        :sortable="item.sortable"
        :label="item.alias"
        :prop="item.pageColumnName"
        :sort-orders="['ascending', 'descending']"
        :class-name="item.className"
      </el-table-column>
            <!-- 展示列 -->
            <el-table-column
        v-for="(item, index) in tabVue.TableColumnsFilter"
        :key="`${item.pageColumnName}-${index}`"
        :sortable="item.sortable"
        :label="item.alias"
        :prop="item.pageColumnName"
        :sort-orders="['ascending', 'descending']"
        :class-name="item.className"
        :show-overflow-tooltip="item.pageColumnName =='remark' ? false : item.showOverflowTooltip"
        :min-width="item.minWidth"
        :width="item.width || undefined">
        <template slot-scope="scope">
                    <slot name="tableColumn" row="scope.row" :columnItem="item">
              <template>{{ scope.row[item.pageColumnName] }}</template>
          </slot>
                </template>
      </el-table-column>
            <!-- 操作列 -->
            <template v-if="hasColumnControl">
                <el-table-column :width="controlColumnInfo" label="操作" fixed="right">
          <template slot-scope="scope">
            <table-column-control :column-control="tabVue.TableController.columnControl" :row-data="scope.row">
            </table-column-control>
          </template>
          </el-table-column>
            </template>
      </el-table>
        <!-- 分页 -->
        <div class="el-table-wrapper__content--footer">
        <el-pagination
        class="el-table__pagination"
        @size-change="tabVue.handleSizeChange"
        @current-change="tabVue.handleCurrentChange"
        :current-page="tabVue.Pagination.PageIndex"
        :page-sizes="tabVue.Pagination.PageSizes"
        :page-size="tabVue.Pagination.PageSize"
        :pager-count="tabVue.Pagination.PageCount"
        :layout="paginationTypeEnum._mapValue()[tabVue.TableAttributes.paginationType].layout"
        :total="tabVue.Pagination.DataCount">
      </el-pagination>
        </div>
  </div>
</template>
<script>
import tableColumnControl from './table-column-control';
import { paginationTypeEnum } from '@enums/common';
export default {
    components: {
      tableColumnControl
  },
    props: {
      parent: {    /* 指定父组件的this */
        type: Object
    }
  },
  data() {
      return {
        tabVue: this.parent || this.$parent,
      paginationTypeEnum
    }
  },
  computed: {
      // 获取操作列的宽度
    hasColumnControl() {
        return this.tabVue.TableController.columnControl && this.tabVue.TableController.columnControl.length;
    },
    controlColumnInfo() {
        if (this.tabVue.TableController.columnControlWidth) {
          return this.tabVue.TableController.columnControlWidth;
      }
      let len = this.tabVue.TableController.columnControlWidth;
      if (len === 1) {
          return '100px';
      } else if (len === 2) {
          return '180px';
      } else {
          return '200px';
      }
    }
  },
  methods: {
      // 刷新页面滚动条
    refreshScrollbar() {
        this.$refs.moduleTable.bodyWrapper.scrollTop = 0;
    }
  },
  watch: {
      'tabVue.TableData': {
        deep: true,
      handler() {
          this.refreshScrollbar();
      }
    }
  }
}
</script>