table模块化增删改查请求

axios查询,新增，修改，删除，restful风格

// 获取表格数据
export function getData(me, url, params) {
    me.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200) {
            me.tableData = res.data.data
        }
    })
    .catch(err => {
        throw err
    })
}
// 新增和修改的方法
export function changeInfo(me, methods, url, form, callback) {
    let data = qs.stringify(form)
    me.service[methods](url, data)
    .then(res => {
        if(res.data.status === 200) {
            callback(me, url)
            me.dialogFormVisible = false
            me.$refs['form'].resetFields()
            Message({type: 'success', message: res.data.message})
        }
    })
}
// 删除的方法
export function delData(me, url, id, callFun) {
    me.$alert('你确定要删除该数据吗？','提示', {
        confirmButtonText: '确定',
        callback: () => {
            me.service.delete(`${url}/${id}`).then(res => {
                if(res.data.status === 200) {
                    callFun(me, url)
                    // me.$message({message: res.data.message, type: 'success'})
                    Message({type: 'success', message: res.data.message})
                }
            })
            .catch(err => {
                throw err
            })
        }
    })
}
// 自定义需要特殊展示的数据，比如sex，status，flag等
export function getTableData(me, url, params, arr) {
    me.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200) {
            me.tableData = res.data.data
            me.total = res.data.total
            me.tableData.map((item) => {
                arr.map((aItem) => {
                    item[aItem] ? item[aItem + '_text'] = '是' : item[aItem + '_text'] = '否'
                })
            })
        }
    })
    .catch(err => {
        throw err
    })
}

调用的地方：

getTableData(this.$parent, '/xxx', {page: this.page, size: this.size}, ['status'])
delData(this, '/info', row.id, getData)
changeInfo(this, methods, '/info', this.form, getData)

写菜单时学会拿router的options和currentRoute

this.menus = this.$router.options.routes
this.activePath = this.$router.currentRoute.path

写面包屑时学会拿route的matched

v-for="(item, index) in $route.matched"

前端分页直接在table的data赋值给计算属性tableData

computed: {
    tableData() {
      return this.requestData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  }

后端分页使用<comu-pagination :total="total" :url="url" />

模块化分页：

// 高度封装的分页
<template>
    <div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :url="url">
        </el-pagination>
    </div>
</template>
<script>
import { getTableData } from '@/utils/table'
export default {
    props: {
        total: {type:Number},
        url: {type:String}
    },
    data() {
        return {
            page: 1,
            size: 10
        }
    },
    created() {
        getTableData(this.$parent, '/list', {page: this.page, size: this.size}, ['completed'])
    },
    methods: {
        handleSizeChange(val) {
            this.page = 1
            getTableData(this.$parent, '/list', {page: this.page, size: val}, ['completed'])
        },
        handleCurrentChange(val) {
            getTableData(this.$parent, '/list', {page: val, size: this.size}, ['completed'])
        }
    }
}
</script>