二次封装 - 表格el-table

         感觉表格的二次封装相对来说，考虑的问题没有那么多，最多就是在表格里面展示除了文字以外、其他特殊的(像按钮，图片等之类的可能比较麻烦一点)，但是这种比较麻烦一点的展示，其实可以通过插槽去解决……

<!-- stripe 标识表格开启斑马纹效果 header-cell-style可自定义表头样式 -->
<el-table
  fit
  stripe
  :header-cell-style="{
    background: '#394D94',
    color: '#ffffff',
  }"
  :data="pageData"
  style="width: 100%"
  max-height="500px"
  height="250"
  center
>
  <!-- 表格是否又可选 -->
  <el-table-column
    v-if="isSelect"
    width="40"
    type="selection"
  ></el-table-column>
  <!-- 表格是否有自定义的序号 -->
  <el-table-column
    v-if="isIndex"
    label="序号"
    type="index"
    :index="indexMethod"
    width="70"
    fixed
  ></el-table-column>
  <!-- 循环渲染表格数据数据 -->
  <el-table-column
    v-for="item in tableColumns"
    :key="item.key"
    :prop="item.key"
    v-bind="item"
    :fixed="item.fixed"
    align="center"
  >
    <!-- 如果表格的头部是两层，则可以这样显示 -->
    <el-table-column
      v-for="itemChildren in item.children"
      :key="itemChildren.key"
      :prop="itemChildren.key"
      v-bind="itemChildren"
      align="center"
    >
      <template slot-scope="scope">
        <!-- 一般通过custom来标识是否走插槽展示一些特殊的字段 -->
        <slot
          v-if="itemChildren.custom"
          :data="scope"
          :itemChildren="itemChildren"
        ></slot>
        <template v-if="!itemChildren.isImg && !itemChildren.custom">{{
          scope.row[itemChildren.key]
        }}</template>
      </template>
    </el-table-column>

    <!-- 展示table表格的单元格的内容 -->
    <template slot-scope="scope">
      <slot v-if="item.custom" :data="scope" :item="item"></slot>
      <template v-if="!item.isImg && !item.custom">{{
        scope.row[item.key]
      }}</template>
    </template>
  </el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
  <el-pagination
    style="margin-top: 10px; margin-right: 0"
    layout="total, sizes, prev, pager, next, jumper"
    :total="paginationData.total"
    :current-page.sync="paginationData.pageIndex"
    :page-size.sync="paginationData.pageSize"
    :page-sizes="[5, 10, 15, 20]"
  >
  </el-pagination>
</div>

// 模板中的相关逻辑
<script>
export default {
  data() {
    return {};
  },
  props: {
    // 分页数据
    paginationData: {
      type: Object,
      default: () => {},
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表格展示数据
    tableColumns: {
      type: Array,
      default: () => [],
    },
    // 是否展示可选框
    isSelect: {
      type: Boolean,
      default: () => false,
    },
    // 是否展示序号
    isIndex: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    pageData() {
      return this.tableData.slice(
        (this.paginationData.pageIndex - 1) * this.paginationData.pageSize,
        this.paginationData.pageIndex * this.paginationData.pageSize
      );
    },
  },
  methods: {
    // 改变选中行的回调
    changeSelection(val) {
      this.$emit("changeSelection", val);
    },
    // 改变页码或者数量
    changeIndexOrPage() {
      console.log(val);
    },
    // 自定义索引(序号)
    indexMethod(index) {
      return (
        index +
        this.paginationData.pageSize * (this.paginationData.pageIndex - 1) +
        1
      );
    },
  },
};
</script>