封装el-table

封装组件

<template>
  <!-- 表格分页 -->
  <div class="table_box">
    <el-table :data="tableData" style="width: 100%" :border="border" :header-cell-style="{background:'#f6f9ff'}" :cell-class-name="cellStyle">
      <el-table-column type="index" :index="indexMethod" align="center" label="序号" width="65" v-if="showIndex">
      </el-table-column>
      <el-table-column v-for="(item, index) in columns" :key="index" :align="item.align" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" :sortable="item.sortable" :min-width="item.minWidth" :show-overflow-tooltip="item.showOverflowTooltip">
        <template slot-scope="scope">
          <slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
          <span v-else>{{ scope.row[item.prop] || "--" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total > 10000 ? 10000 : total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    border: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: [],
    },
    columns: {
      type: Array,
      default: [],
    },
    total: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    cellStyle: {
      type: Function,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.cellStyle;
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("changeSize", val);
    },
    handleCurrentChange(val) {
      this.$emit("changeCurrent", val);
    },
    //表单选择全选
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * 10;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  padding: 10px;
  text-align: right;
  background: #fff;
}
// .table_box {
//   /deep/.el-table__header-wrapper {
//     .tableHeader {
//       th {
//         background-color: #f6f9ff !important;
//       }
//       .el-table_1_column_1 {
//         background-color: #f6f9ff !important;
//       }
//     }
//   }
//   // .tableHeader {
//   //   border: 1px solid #f40;
//   //   background-color: #f6f9ff !important;
//   // }
// }
</style>

使用

1.引入组件

import Table from "@/components/Table/index.vue";

2.注册组件

components: {
    Table,
  },

3.配置表头数据

data() {
    return {
      columns: [
        {
          prop: "userId",
          label: "用户ID",
          minWidth: 70,
          showOverflowTooltip: true,
        },
        {
          prop: "username",
          label: "用户账号",
          minWidth: 100,
          showOverflowTooltip: true,
        },
        {
          prop: "authUserName",
          label: "认证姓名",
          minWidth: 80,
          showOverflowTooltip: true,
        },
        {
          prop: "authIdNo",
          label: "认证身份证号",
          minWidth: 140,
          showOverflowTooltip: true,
        },
        {
          prop: "authMobile",
          label: "认证手机号码",
          minWidth: 100,
          showOverflowTooltip: true,
        },
        {
          prop: "authBankNo",
          label: "认证银行卡号",
          minWidth: 140,
          showOverflowTooltip: true,
        },
        {
          slot: "personAuthResult",
          label: "认证状态",
          minWidth: 80,
          showOverflowTooltip: true,
        },
        {
          prop: "registerTime",
          label: "注册时间",
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          slot: "lockFlag",
          label: "账号状态",
          minWidth: 80,
          showOverflowTooltip: true,
        },
        {
          slot: "action",
          label: "操作",
          minWidth: 130,
        },
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },

4.配置组件

<div class="tableWrap">
      <Table :tableData="tableData" :columns="columns" :cellStyle="cellStyle" :total="total" :currentPage="currentPage" :pageSize="pageSize" @changeSize="handleSizeChange" @changeCurrent="handleCurrentChange">
        <template slot="personAuthResult" slot-scope="scope">
          {{ personAuthResultObj[scope.row.personAuthResult] }}
        </template>
        <template slot="lockFlag" slot-scope="scope">
          <el-switch v-model="scope.row.lockFlag" active-color="#13ce66" inactive-color="#ff4949" active-value="0" inactive-value="1" @change="changelockFlag(scope.row)"></el-switch>
        </template>
        <template slot="action" slot-scope="scope">
          <el-button type="text" @click="particular(scope.row)">详情</el-button>
        </template>
      </Table>
    </div>