将element-ui table封装,和pagination封装到一起

本文介绍了如何封装Element UI的表格组件,使其更接近Ant Design Vue的使用方式,实现列配置和分页一体化,提升开发效率。作者分享了封装后的组件用法和示例,适用于希望在项目中统一表单风格的开发者。
摘要由CSDN通过智能技术生成

用过antdv的table组件之后,再用element 的table实在不方便,就封装了一下,模仿antdv的使用方法,将分页组件也封入到组件中

原始用法:

缺点:有多少列就要写多少个el-table-column, 分页组件也需要每次引入,同一段代码不断的重复写

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

封装之后的组件使用: 用法同antdv

<base-table
    :data="tableData"
    :stripe="true"
    :pagination="pagination"
    :table-title="tableTitle">
    <template #warnLevel="{row}">
      <span :style="{color: colorDict[row.warnLevel].color}">{{ colorDict[row.warnLevel].label }}</span>
    </template>
  </base-table>

tableTitle就是我们的所有列,该对象的所有属性同element ui 中的Table-column属性,例如:

const tableTitle = [
  {
    key: 'name',
    title: '设施名称',
    sortable: true
  },
  {
    key: 'comp',
    title: '设施类型',
    sortable: true
  },
  {
    key: 'county',
    title: '分公司',
    sortable: true
  },
  {
    key: 'town',
    title: '灾害类型',
    sortable: true
  },
  {
    key: 'town',
    title: '影响时间',
    sortable: true
  },
  {
    key: 'town',
    title: '灾害电压',
    sortable: true
  },
  {
    key: 'warnLevel',
    title: '预警等级',
    sortable: true,
    scopedSlots: { customRender: 'warnLevel' } // 个性化需要设置此字段
  }
];

下面提供一下完整的封装组件: 

<template>
  <div class="base-table-wrap">
    <el-table
      v-bind="$attrs"
      :class="[extraClass]"
      style="width: 100%"
      header-cell-class-name="jt-table-header"
      v-on="$listeners">
      <el-table-column
        v-for="(column, idx) in tableTitle"
        :key="idx"
        :label="column.title"
        :prop="column.key"
        :show-overflow-tooltip="tooltip"
        v-bind="column"
      >
        <template slot-scope="scope">
          <slot
            v-if="column.scopedSlots && column.scopedSlots.customRender"
            :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
            v-bind="scope"
            v-on="$listeners"
          />
          <span v-else>{{ scope.row[column.key] }}</span>
        </template>


      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.limit"
      :total="pagination.total"
      background
      class="system-pagination"
      layout="prev, pager, next,sizes,jumper"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>


</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    tableTitle: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: [Object, Boolean],
      default: () => {}
    },
    sizeChange: {
      type: Function,
      default: () => {}
    },
    pageChange: {
      type: Function,
      default: () => {}
    },
    theme: {
      type: String,
      default: 'light'
    },
    tooltip: {
      type: Boolean,
      default: true
    },
    extraClass: {
      type: String,
      default: ''
    }
  }
};
</script>

<style  lang="scss">
.base-table-wrap::after {
  display: block;
  content: 'clear';
  clear: both;
  line-height: 0;
  visibility: hidden;
}
.jt-table-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.light {
  .el-table__header-wrapper {
    background-color: #f6f6f6;
  }
}
</style>

 

在main.js 中引入

import BaseTable from '@/components/Base/BaseTable';

Vue.component('base-table', BaseTable);

然后就可以在组件中直接<base-table/>使用了

 

注意: 使用过程中如果有什么问题可以发留言哈,如果有什么好的建议,也欢迎随便提哦

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值