elementUI表格封装

<template>
  <div class="jmtTalbe">
    <el-table border :data="list" :script=tableConfig.script :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="handleSelectionChange">
      <el-table-column
        v-if="tableConfig.selectBox"
        type="selection"
        width="36">
      </el-table-column>
      <template v-for="(item, index) in tableConfig.config">
        <el-table-column
          v-if="item.shown"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :formatter="item.formatter">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,'Edit')" type="text" size="middle" v-if="item.isEdit">编辑</el-button>
            <el-button @click="handleClick(scope.row,'Used')" type="text" size="middle" v-if="item.isUsed">{{scope.row.status == 1?'禁用':'启用'}}</el-button>
            <el-button @click="handleClick(scope.row,'Delete')" type="text" size="middle" v-if="item.isDel">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :formatter="item.formatter">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'jmtTalbe',
  props: {
    list: {
      type: Array,
      default: () => {}
    },
    tableConfig: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // multipleSelection: []
    }
  },
  created () {
  },
  methods: {
    handleClick (row, name) {
      this.$emit('operations', {
        item: row,
        name: name
      })
    },
    handleSelectionChange (val) {
      // this.multipleSelection = val
      this.$emit('fistPageData', val)
    }
  }
}
</script>
<style scoped>
  .jmtTalbe{
    margin: 20px 0;
  }
</style>

调用方法

<template>
  <div class="page">
    <jmt-search></jmt-search>
    <jmt-table :list="list" :table-config="tableConfig"/>
    <jmt-pagination
      :currentpage="page"
      :pagecount="pageCount"
      :pagesize="pagesize"
      :islocalstorage="true"
      @currentPage="getPage"
      @pageSize="getPageSize"
    />
  </div>
</template>

<script>
import JmtSearch from '@/components/jmtSearch'
import JmtTable from '@/components/jmtTable'
import JmtPagination from '@/components/pagination'
export default {
  components: { JmtSearch, JmtTable, JmtPagination },
  data () {
    return {
      page: 1,
      pagesize: Number(localStorage.getItem('pageSize')) || 20,
      pageCount: 0,
      list: [
        {
          id: 2,
          user: '13810974462',
          create_time: '2019-02-27 10:11:06',
          level: '高级会员',
          expired: '2020-03-07 00:00:00',
          status: 0
        },
        {
          id: 3,
          user: '23333333333',
          create_time: '2019-02-28 15:04:19',
          level: '高级会员',
          expired: '2021-02-28 00:00:00',
          status: 0
        },
        {
          id: 4,
          user: '1433223',
          create_time: '2019-02-28 15:05:01',
          level: '高级会员',
          expired: '2019-03-15 15:05:01',
          status: 0
        }
      ],
      tableConfig: {
        stripe: true,
        loading: false,
        class: 'table-list',
        style: 'width:100%;',
        config: [
           {
            label: '排序',
            prop: 'sort',
            align: 'center',
            width: '1'
          },
          {
            label: 'ID',
            prop: 'id',
            align: 'center',
            width: '95'
          },
          {
            label: '发布者',
            prop: 'user',
            align: 'center',
            width: '95'
          },
          {
            label: '标题',
            prop: 'create_time',
            align: 'center',
            width: '95'
          },
          {
            label: '创建时间',
            prop: 'level',
            align: 'center'
          },
          {
            label: '类型',
            prop: 'expired',
            align: 'center'
          },
          {
            label: '来源',
            prop: 'expired',
            align: 'center'
          },
          {
            label: '状态',
            prop: 'expired',
            align: 'center'
          },
          {
            label: '操作',
            prop: 'status',
            align: 'center',
            shown: true,
            isEdit: true,
            isDel: true,
            isCom: true
          }
        ]
      }
    }
  },
  methods: {
    getPage (pageNum) {
      this.page = pageNum
      this.fetch()
    },
    getPageSize (pageSize) {
      this.pagesize = pageSize
      this.fetch()
    }
  }
}
</script>