工具类

1 目录结构

└─ src
   └─ util
      ├─ global.js              # 表格类页面初始化数据与获取数据方法
      └─ index.js               # 一些工具函数

global.js

该文件放在 util.js 中有点不合适，该方法更像一个 mixins，为表格类页面提供一些可复用的数据与方法，之所以未以 mixins 形式使用，是为了省去 mixin 的注入过程。
当然，mixin 也提供了全局混入功能，但是我并不想在每个 Vue 实例中都注入该混入。

源码解析

export default {

  install(Vue) {

    // 表格类数据初始化
    // 该方法和 data 一样，放回一个方法，以使每个实例中数据不会互相影响
    Vue.prototype.$defaults = function () {
      return {
        loading: false,
        // 表单
        form: {
          keyword: ''
        },
        // 表格数据
        list: [],
        // 表格中排序字段
        sort: {
          sortby: '',
          order: '',
        },
        // 分页
        pagination: {
          page: 1,
          per_page: 20,
          total: 0,
        },
      }
    }

    /**
     * @desc 表格类获取数据 
     * @param { Promise } http    请求接口方法
     * @param { Object }  vm      Vue 实例
     * @param { Boolean } isReset 是否重置页面
     * @param { Number } id       请求接口id参数
     * @param { Number } sub_id   请求接口子id参数
     */
    Vue.prototype.$getData = async function (http, vm, isReset = false, ...args) {
      if(vm.loading) return;

      isReset ? vm.pagination.page = 1 : '';

      let params = Object.assign({}, vm.form, vm.sort, vm.pagination);

      vm.loading = true;
      const res = await http(...args, params);
      vm.$tableScrollReset();
      vm.loading = false;

      if (res.code === 200) {
        vm.list = res.data;
        vm.pagination.total = res.total;
      }

      return res;
    }

    // el-table 滚动到顶部，在获取到数据时，将表格滚动到顶部
    Vue.prototype.$tableScrollReset = (el = '.el-table__body-wrapper') => {
      let oEl = document.querySelector(el);
      if (oEl) {
        oEl.scrollTop = 0;
        // oEl.scrollLeft = 0
      }
    }
  }
}

引入

在 main.js 中注入到 Vue 中作为全局方法

import globalFunc from '@/util/global';
Vue.use(globalFunc);

使用

// 引入接口
import { getGenres } from "@/api/basic";

export default {
  data() {
    return {
      // 初始化默认数据
      ...this.$defaults(),
    }
  },

  mounted() {
    this.getData();
  },

  methods: {
    // 获取接口数据 $getData 方法会将数据写入到 data 中
    getData(isReset) {
      this.$getData(getGenres, this, isReset);
    }
  }
}