share-fun-web/src/components/BaseTable.vue

<template>
  <div class="mt-20">
    <el-table
      :data="items"
      :style="`width: 100%; min-height:${minHeight};`"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <slot name="table">
        <template v-for="column in columns">
          <el-table-column
            v-if="column.key === 'selection'"
            :key="column.key"
            :type="column.key"
            :min-width="column.minWidth"
            :width="column.width || 50"
            :align="column.align || 'center'"
          />
          <el-table-column
            v-else
            :key="column.key"
            :prop="column.key"
            :label="column.name"
            :min-width="column.minWidth"
            :width="column.width"
            :align="column.align"
            :fixed="column.fixed"
            :show-overflow-tooltip="column['show-overflow-tooltip']"
          >
            <template slot-scope="scope">
              <ex-slot
                v-if="column.render"
                :render="column.render"
                :row="scope.row"
                :index="scope.$index"
                :column="column"
              />
              <span v-else-if="column.type === 'tag'">
                <el-tag
                  size="medium"
                  :type="column.fetchTagType(scope.row[column.key]) || ''"
                >
                  {{
                    typeof column.tagName === 'function'
                      ? column.tagName(scope.row)
                      : scope.row[column.key]
                  }}
                </el-tag>
              </span>
              <span v-else-if="column.type === 'switch'">
                <el-switch
                  :value="scope.row[column.key]"
                  :active-text="column.switchName[0]"
                  :inactive-text="column.switchName[1]"
                  @change="column.api(scope.row)"
                >
                </el-switch>
              </span>
              <span v-else>{{ scope.row[column.key] || '-' }}</span>
            </template>
          </el-table-column>
        </template>
      </slot>
    </el-table>
    <div class="page-select">
      <div class="btn-box">
        <slot :selected="multipleSelection" name="btn-box" />
      </div>
      <el-pagination
        v-if="showPage"
        background
        layout="prev, pager, next"
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="num => pageChange(num)"
      />
    </div>
  </div>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    };

    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  }
};

export default {
  name: 'TableWithPage',

  components: {
    'ex-slot': exSlot
  },

  props: {
    columns: {
      type: Array,
      default: () => []
    },
    items: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => ({})
    },
    pageChange: {
      type: Function,
      default: () => {}
    },
    minHeight: {
      type: String,
      default: '600px'
    },
    showPage: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      multipleSelection: []
    };
  },

  watch: {
    items: {
      handler(val) {
        this.multipleSelection = [];
      },
      immedaite: true
    }
  },

  methods: {
    handleSelectionChange(params) {
      this.multipleSelection = params;
    }
  }
};
</script>

<style scoped>
.page-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px 0 20px;
}

.btn-box .el-button {
  margin: 2px 10px;
}
</style>