做一个 vue分页的 mixins(代码提取)

因为项目里分页的界面太多了，所以进行一个代码提取。主要是讲代码里面的增、删、改、查、导出、多选、等功能提取出来，用的时候只需要配置一下必要的。

前提：项目里面后台接口返回的数据格式是高度统一的。

          ui 需使用elementUI 如使用的是其他的UI框架 不能保证loading逻辑和数据绑定逻辑 与此文章一致。

注意：！！！因后台接口的参数结构和返回的数据结构很可能不一致 所以， 有关请求结果的方法都需要进行微调整。

            ！！！ 导出方法代码请看文章：CSDN

 然后上代码。

/**
 * 目前已完成功能：
 *  分页查询/非分页查询
 *  导出
 *  请求参数重置
 *  新增或编辑弹窗打开
 *  删除
 *  多选
 * 
 * 配置项：tableViewOptions内的属性
 * 配置方法或回调：
 *  afterGetList：请求成功(code === 0)后执行 
*/
import exportFile from "@/utils/exportFile"
export default {
  data () {
    return {
      tableViewOptions: {
        // 配置项
        isNeedCreatedQuery: true, // 是否需要在创建的时候请求列表
        isNeedActivatedQuery: true, // 是否在激活时重新请求列表
        isNeedPage: true, // 是否需要分页
        listQueryApi: null, // 请求列表的api(function)
        exportTableApi: null, // 导出api(function)
        deleteApi: null, // 删除Api(function)
      },
      dialogVisible: false, // 新增活编辑弹窗 加载控制
      exportTableLoading: false, // 导出控制按钮
      tableLoading: false, // table loading
      initData: {}, // 保存query数据的开始状态
      queryForm: {}, // list 的查询条件
      queryFormHelp: {}, // list的查询条件的辅助字段, 点击重置时这里的数据也会被重置
      selectionList: [], // 多选列表
      list: [], // 数据列表
      total: 0, // 分页
      pageSize: 10,
      pageNum: 1,
    }
  },
  created () {
    this.saveInitData()
    if (this.tableViewOptions.isNeedCreatedQuery) this.getList()
  },
  activated () {
    if (this.tableViewOptions.isNeedActivatedQuery) this.getList(this.pageNum)
  },
  mounted () {},
  methods: {
    exportTable () {
      if (!this.tableViewOptions.exportTableApi) {
        return
      }
      this.exportTableLoading = true
      this.tableViewOptions.exportTableApi(this.queryForm).then(res => {
        this.exportTableLoading = false
        exportFile(res)
        this.$message.success('导出成功')

      }).catch(res => {
        this.exportTableLoading = false
        return this.$message.error('错误')
      })
    },
    // 预留的可配置方法 在请求成功后执行， 不配置则为空函数
    afterGetList () {},
    // 请求数据列表
    // 参数: pageNum 请求页数， 默认值：1
    getList (pageNum = 1) {
      if (!this.tableViewOptions.listQueryApi) {
        return
      }
      const queryForm = {
        pageNum,
        pageSize: this.pageSize,
        ...this.queryForm
      }
      this.list = []
      this.selectionList = []
      this.pageNum = pageNum
      this.tableLoading = true
      this.tableViewOptions.listQueryApi(queryForm).then(res => {
        this.tableLoading = false
        if (res.code === 0) {
          // 获取数据
          if (this.tableViewOptions.isNeedPage) {
            this.total = res.data.total
            this.list = res.data.rows
          } else {
            this.list = res.data
          }
          // 执行可配置回调
          if (this.afterGetList) this.afterGetList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(res => {
        this.tableLoading = false
        return this.$message.error('错误')
      })
    },
    // 打开新增或编辑弹窗
    showAddOrUpdate (data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data)
      })
    },
    // 删除
    deleteRow (id) {
      if (!this.tableViewOptions.deleteApi) {
        return
      }
      const delqeury = id ? [{ id }] : this.selectionList.map(item => {
        return {id: item.id}
      })
      
      if (!delqeury.length) {
        return this.$message.error('未选中删除项')
      }
      this.tableViewOptions.deleteApi(delqeury).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.getList(this.pageNum)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(res => this.$message.error('错误'))
    },
    // 监听table多选  table event:selection-change
    handleSelectionChange (val) {
      this.selectionList = val
    },
    // 分页 page event
    handleSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getList(this.pageNum)
    },
    // 保存初始数据
    saveInitData () {
      const initData = this.initData
      initData.queryForm = JSON.parse(JSON.stringify(this.queryForm))
      initData.queryFormHelp = JSON.parse(JSON.stringify(this.queryFormHelp))
    },
    // 重置
    resetForm () {
      const initData = this.initData
      this.queryForm = JSON.parse(JSON.stringify(this.initData))
      this.queryFormHelp = JSON.parse(JSON.stringify(this.initData))
    }
  }
}

属性说明：

属性	type	说明	默认值	备注
tableViewOptions.isNeedCreatedQuery	Boolean	是否在创建组件时执行请求数据列表	true
tableViewOptions.isNeedActivatedQuery	Boolean	是否在组件重新活跃时请求数据列表	true	需配合keep-alive 组件使用
tableViewOptions.isNeedPage	Boolean	是否需要分页	true	分页不分页后台接口数据结构不同项目可能会不一样，需根据情况自行更改逻辑，getList里面的逻辑
tableViewOptions.listQueryApi	function	列表请求函数，需在函数内返回请求结果promise	null
tableViewOptions.exportTableApi	function	导出请求函数，需在函数内返回请求结果promise	null	如果导出使用的是地址导出的方式，可以将此配置项修改为导出地址，然后修改  exportTable方法逻辑即可
tableViewOptions.deleteApi	function	删除请求函数，需在函数内返回请求结果promise	null
dialogVisible	Boolean	弹窗是否加载	false	用v-if 绑定在弹窗组件上
exportTableLoading	Boolean	导出按钮loading	false	用v-loading 绑定在导出按钮上
tableLoading	Boolean	table的Loading状态	false	用v-loading 绑定在table上
initData	Object	仅用于存初始状态的请求数据，无需配置和操作
queryForm	Object	请求参数的存放位置	{}	需与请求表单form配合使用
queryFormHelp	Object	请求参数的帮助属性存放位置，如范围时间v-model绑定的是一个属性，但是传给后台却要分开两个属性，可在这里设置帮助属性	{}	存放在这里的属性，重置的时候也会被重置为初始状态
selectionList	Array	多选数据列表	[]
list	Array	表格数据列表	[]	需绑定在table的data上
total	Number	数据总条数，一半由后台返回	0	需绑定在分页的total上
pageSize	Number	分页大小	10	需绑定在分页上
pageNum	Number	当前页数	1	需绑定在分页上