element UI 封装table组件

tableWrapper.js

<template>
  <div>
    <el-table
      :height="settings.height"
      v-loading="settings.isLoading"
      :header-cell-style="{background:'#FAFAFA',color:'rgba(0,0,0,0.85)',height:'54px'}"
      @selection-change="e => handleClick('select',e)"
      :data="data"
      style="width: 100%"
    >
      <el-table-column v-if="settings.isSelection" width="55" type="selection" fixed align="center"></el-table-column>
      <el-table-column v-if="settings.isIndex" type="index" :index="1" fixed align="center"></el-table-column>
      <template v-for="(item,index) in header">
        <el-table-column
          v-if="item.prop!=='action'"
          :key="item.prop"
          :type="item.type"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        >
          <template slot-scope="scope">
          //过滤器
            <span v-if="item.filter">{{obj.sex(1)}}</span>
            <span v-if="!item.filter">{{
          item.formatter
          ? item.formatter(scope.row[item.prop || item.showField])
          : scope.row[item.prop || item.showField]
          }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="item.prop==='action'"
          :key="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="item.arr">
              <el-button
                size="mini"
                :type="item2.type=='delete'?'danger':'text'"
                v-for="item2 in item.arr"
                :key="item2.type"
                @click="item2.fun(scope.$index, scope.row)"
              >{{item2.name}}
              </el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="settings.isPagination"
      background
      style="text-align:right;padding:6px 0"
      @size-change="e=>handleClick('pageSize',e)"
      @current-change="e=>handleClick('currentPage',e)"
      :current-page="currentPage"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="settings.total"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        obj: {
          sex: function (sex) {
            if (sex === 1) {
              return '女'
            }
            return '男'
          }
        }
      }
    },
    props: {
      data: {type: Array, default: () => []},
      header: {type: Array, required: true},
      settings: {
        type: Object,
        default: () => {
          return {
            height: null,
            isBorder: false,
            isLoading: false,
            isIndex: false,
            isSelection: false,
            isPagination: false,
            currentPage: 1,
            total: 20
          };
        }
      }
    },
    computed: {
      currentPage: function () {
        return this.settings.currentPage;
      }
    },
    
    methods: {
      handleClick(type, e, i) {
        this.$emit("select", e);
      }
    }
  };
</script>

<style lang="" scoped>
</style>

组件内引入

<table-wrapper @select="handleSelect" :data="tableData" :header="tableHeade" :settings="tableSettings"></table-wrapper>

import tableWrapper from '@/components/tableWrapper'
components: {
  tableWrapper,
},
data() {
  return {
    tableData: [],
    tableHeade: [
      {prop: "name", label: "姓名", width: 120},
      {prop: "phone", label: "联系方式", width: 120, fixed: true},
      {prop: "job", label: "工作", width: 80},
      {prop: "type", label: "类型", width: 160},
      {prop: "status", label: "信用金审核状态", width: 160},
      {prop: "time1", label: "时间1", width: 160},
      {prop: "time1", label: "时间2", width: 160},
      {
        prop: "action", label: "操作", fixed: 'right', arr: [{
          type: 'text',
          name: '编辑',
          fun: this.fun
        }]
      },
    ],
    tableSettings: {
      height: "calc(90vh - 300px)",
      title: "element UI 封装table组件",
      isPagination: true,
      total: 100,
      isSelection: true
    },
  }
},
methods:{
  fun(index, row) {
    console.log(index, row)
  },
  handleSelect(e) {
     console.log(e)
  },
}