element-ui 表格的封装

Table.vue

<template>
  <div>
    <el-table
      :height="settings.height"
      v-loading="settings.isLoading"
      :border="settings.isBorder"
      @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"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        ></el-table-column>
        <el-table-column
          v-else
          :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':'primary'"
                v-for="item2 in item.arr"
                :key="item2.type"
                @click="handleClick(item2.type, scope.row,scope.$index)"
              >{{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>
/* 
    传值说明:
    settings:{  相关配置
        isLoading加载数据时显示动效
        height表格高度
        autoHeight:true 是否自动高度
        isSelection; 是否有多选
        selectionWidth多选的宽度
        isIndex 是否需要序列号,默认不需要
        isBorder:是否加框线,默认添加,
        isPagination:是否添加分页,默认false,
        total: 列表总条数
        currentPage 当前页数
    }
    tableData: { 表格数据}
    tableHeader:{表头字段
        isTemplate 是否使用插槽
        isImagePopover 图片带tooltip
    }

    事件说明:
    handleClick
    参数 type 点击的类型,如
      选择select, 多选时
      编辑edit, 按钮为编辑时
      查看show, 按钮为查看时
      删除delete, 按钮为删除时
      当前条数pageSize, 开启分页时
      当前页数currentPage等 开启分页时
    e 选中项
    i 选中索引

*/

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

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

使用示例
tableUse.vue

<template>
  <div>
    <h2>{{tableSettings.title}}</h2>
    <v-table @select="handleSelect" :data="tableData" :header="tableHeader" :settings="tableSettings" />
  </div>
</template>

<script>
import vTable from "@/components/Table";
import constant from "./constant";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      tableHeade: [],
      tableSettings: {}
    };
  },
  components: { vTable },
  methods: {
    handleSelect(e) {
      // console.log(e);
    },
  },
  created() {
    this.tableHeader = constant.tableHeader;
    this.tableSettings = constant.tableSettings;
    for (let i = 0; i < 30; i++) {
      this.tableData.push({
        name: "王小虎",
        department: "财务部",
        workCode: "SPT0108",
        annualLeave: 1,
        privateAffairLeave: 1,
        sickLeave: 1,
        maternityLeave: 1,
        paternityLeave: 1,
        doubleOvertime: 100,
        threeOvertime: 1000,
        totalAllowance: 12222,
        attendanceCoefficient: 12,
        signature: "王小虎"
      });
    }
  }
};
</script>

constant.js

const width = 120;
const tableSettings = {
  height: "71vh",
  title: "自愿加班/请假申请表",
  isPagination: true,
  total: 100
  // currentPage: 2
  // isIndex: true
  // isSelection: true
};
const tableHeader = [
  // { type: "selection", width: 120, fixed: true },
  { prop: "name", label: "姓名", width, fixed: true },
  { prop: "department", label: "部门", fixed: true },
  { prop: "workCode", label: "工号", width, fixed: true },
  { prop: "annualLeave", label: "年假(天)", width: 80 },
  { prop: "privateAffairLeave", label: "事假(小时)", width: 90 },
  { prop: "sickLeave", label: "病假(小时)", width: 90 },
  { prop: "maternityLeave", label: "产假(天)", width: 80 },
  { prop: "paternityLeave", label: "陪产假(小时)", width: 110 },
  { prop: "doubleOvertime", label: "二倍加班", width },
  { prop: "threeOvertime", label: "三倍加班", width },
  { prop: "totalAllowance", label: "津贴合计", width },
  { prop: "attendanceCoefficient", label: "出勤系数", width },
  { prop: "signature", label: "签字", width }
  // {
  //   prop: "action",
  //   label: "操作",
  //   width,
  //   arr: [{ type: "edit", name: "查看" }]
  // }
];
export default { tableHeader, tableSettings };