前端歌谣-第壹佰一十三课-vue2中tablemix写法

前端歌谣

于 2024-03-05 09:52:44 发布

阅读量333

点赞数 12

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_41632427/article/details/135718119

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文介绍了在Vue2项目中如何使用tableBase.jsmixin进行数据管理和表单交互，包括分页、筛选、导出以及打印功能的实现方法。

摘要由CSDN通过智能技术生成

前言

tableBase.js

说说vue2中minxin的用法大概就是这个样子

export const tableBaseMixin = {
  data() {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      selectionData: [],
      tableData: [],
      listLoading: false,
      searchQuery: {},
      pageQuery: {
        current: 1,
        size: 10
      },
      downLoadUrl: {
        downLoadUrl: '',
        excelName: ''
      },
    }
  },
  created() {

  },
  methods: {
    async doExportRequest(exportParams) {
      const response = await this.exportRequest(exportParams.url, exportParams.method || 'get', exportParams.params)
      const {
        status,
        data,
        statusText
      } = response
      if (status === 200) {
        this.downloadFile(data, exportParams.fileName)
      } else {
        this.$message.error(statusText)
      }
    },
    currentChange(val) {
      this.page.current = val
      this.page.page = val;
      this.page.currentPage = val;
      this.getList();
    },
    sizeChange(val) {
      this.page.current = 1;
      this.page.size = val;
      this.page.limit = val;
      this.page.pageSize = val;
      this.getList();
    },
    refreshChange () {
      this.getList();
    },
    refreshData () {
      this.getList();
    },
    //  搜索栏搜索
    async searchChange(form, done) {
      this.page.current = 1
      this.page.currentPage = 1
      form && (this.searchQuery = form)
      done && done()
      await this.getList();
    },
    selectionChange(val) {
      this.selectionData = val;
    },
    handlePrint() {
      this.$message.warning('功能暂未开放，敬请期待！')
    },
  }
}