1、全局组件

• 1.1 配置组件

<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <h3>{{ title }}</h3>
    </div>
    <slot></slot>
  </el-card>
</template>

<script>
export default {
  name: "InnerCard",
  props: {
    title: {
      type: String,
      default: "",
      require: true
    }
  }
};
</script>

• 1.2、新建index.js 用于统一配置全局组件

//index.js
import InnerCard from "./InnerCard";
export default {
  install(Vue) {
    Vue.component("InnerCard", InnerCard);
  }
};

• 1.3、在main.js中引入

import Vue from "vue";
import Component from "@/components";
Vue.use(Component);

2、element ui中 el-table二次封装

表格组件

<!-- 公共表格子组件 -->
<template>
  <div class="inner-table">
    <el-table border :data="tableData" v-loading="loading">
      <el-table-column
        :label="item.label"
        :prop="item.prop"
        v-for="(item, index) in columns"
        :key="index"
        :width="item.width"
        :align="item.align"
      >
        <template slot-scope="scope">
          <span v-if="!item.scopedSlots"> {{ scope.row[item.prop] }}</span>
          <slot :name="item.scopedSlots" :row="scope.row" v-else></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-footer" v-if="paginationVisible">
      <div class="actions"></div>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :current-page="pageNo"
          :total="total"
          @current-change="searchByPage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InnerTable",
  props: {
    //表格loading
    loading: {
      type: Boolean,
      default: false
    },
    //表格数据
    tableData: {
      type: Array,
      default: () => [],
      require: true
    },
    //表格表头
    columns: {
      type: Array,
      default: () => [
        // {
        //label:'标题'
        // width:'宽度'
        // align:'对齐方式' center/left/right
        // prop: '绑定的数据'
        // scopedSlots:'特殊的格式显示数据'
        // }
      ],
      require: true
    },
    //页码
    pageNo: {
      type: Number,
      default: 1
    },
    //总数
    total: {
      type: Number,
      default: 0
    },
    //是否显示分页
    paginationVisible: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    searchByPage(page) {
      this.$emit("searchByPage", page);
    }
  }
};
</script>

页面使用

<!-- 待封停公会 -->
<template>
   <inner-table
        :loading="tableLoading"
        :tableData="tableData"
        :columns="columns"
        :pageNo="pageNo"
        :total="total"
        @searchByPage="searchByPage"
      >
        <div slot="settlementWay" slot-scope="scope">
          <span>{{
            scope.row.status == 1
              ? "月付"
              : scope.row.settlementWay == 2
              ? "季付"
              : ""
          }}</span>
        </div>
        <div slot="action" slot-scope="scope">
          <el-button
            type="text"
            >详情</el-button
          >
        </div>
      </inner-table>
</template>

<script>
export default {
  name: "pendingBanAssociation",
  data() {
    return {
      tableLoading: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          label: "渠道信息",
          prop: "guildName",
          align: "center"
        },
        {
          label: "结算方式",
          scopedSlots: "settlementWay",
          align: "center"
        },
        {
          label: "操作",
          scopedSlots: "action",
          align: "center"
        }
      ],
    };
  },
  methods: {   
    searchByPage(page) {
      this.pageNo = page;
      this.getGuildinfoStopPage();
    }
  }
};
</script>

3、自定义指令

4、 Vuex配置使用

5、动态路由配置

6、webpack打包优化