基于element,二次封装table组件

为什么封装table组件

后台管理系统很多模块使用了table，基于此现状，简单的封装了table组件，支持自定义列，自定义操作栏 1.封装custom-table组件

<template>
  <div class="custom-table">
    <el-table v-bind="{ ...$attrs, ...$props }" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)">
      <el-table-column v-for="(item, index) in columns" :key="index" v-bind="{ ...item }" :width="item.width">
        <template v-for="slot in item.slotsName" slot-scope="scope">
          <slot :name="slot" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['columns', 'loading'],
  mounted() {}
}
</script>

<style lang="scss" scoped>
.custom-table {
  .el-table {
    font-size: 12px;
    .el-table--border {
      border-left: none;
      border-top-color: #d8dde8;
    }
    .header-cell-sty {
      font-size: 12px;
      background-color: #f2f6fc;
      color: #333;
      font-weight: 400;
    }
    .header-cell-sty:first-child {
      padding-left: 4px;
    }

    .cell-sty {
      padding: 10px 5px;
      font-size: 12px;
    }
    .cell-sty:first-child {
      padding-left: 4px;
    }
  }
}
</style>