vue中使用mixins提高列表页编写效率

使用vue开发后台系统会有大量列表页, 列表页一般有分页删除获取列表等操作,我们可以编写mixins,吧一些公共函数做个封装,可以极大提高开发效率

mixins/pager.js

export default {
    data() {
        return {
            pager: {
                pageSize: 15,
                pageNum: 1,
                count: 0
            },
            tableData: [],
            loading: false
        }
    },
    methods: {
        // 表单重置  需在el-form-item上设置prop
        onReset(formName = 'form') {
            this.$refs[formName].resetFields()
            this.search()
        },
        search() {
            this.pager.pageNum = 1
            this.callFetchTableData()
        },
        changePage(page) {
            this.pager.pageNum = page
            this.callFetchTableData()
        },
        callFetchTableData() {
            if (this.loading) return
            if (this.getTableData && typeof this.getTableData === 'function') {
                this.loading = true
                this.getTableData()
                    .then(res => {
                        this.tableData = res.data || res.records || res
                        this.pager.count = res.count || res.total
                        this.loading = false
                    })
                    .catch((err) => {
                        console.log('err', err)
                        this.loading = false
                    })
            }
        },
        openAlert(content, title, confirmText, callback ) {
            this.$alert(content || '', title || '', {
                confirmButtonText: confirmText || '确定',
                callback: () => {
            if (callback && typeof callback === 'function') {
            callback()
            }
        }
            })
        },
        callDelete(func, text) {
            let loading$
            this.$confirm(text || '确认删除？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    loading$ = this.$loading({
                        lock: true,
                        text: '正在处理...'
                    })
                    return func.apply(this)
                })
                .then(() => {
                    loading$ && loading$.close()
                    this.callFetchTableData()
                })
                .catch(() => {
                    loading$ && loading$.close()
                })
        }
    },
    mounted() {
        this.callFetchTableData()
    }
}

使用: page.vue

<template>
    <div class="logs-manage-page">
        <div class="com-fc">
            <el-form :model="searchData" inline ref="ruleForm">
                <el-form-item prop="waringType">
                    <el-input v-model="searchData.keywords" placeholder="关键字搜索" />
                </el-form-item>
                <el-button type="success" @click="search">搜索</el-button>
                <el-button @click="onReset('ruleForm')">重置</el-button>
            </el-form>
        </div>
        <el-table :data="tableData" row-key="id" border>
            <el-table-column type="index" width="55" label="序号"> </el-table-column>
        </el-table>
        <el-pagination
            background
            :current-page.sync="pager.pageNum"
            @current-change="changePage"
            :page-size="pager.pageSize"
            layout="prev, pager, next"
            :total="pager.count"
        >
        </el-pagination>
    </div>
</template>

<script>
import { warningList } from '@/api/userInfo'
import pager from '@/mixins/pager'

export default {
    name: 'logs-manage-page',
    mixins: [pager],

    data() {
        return {
            searchData: {
                keywords: ''
            },
            tableData: []
        }
    },
    methods: {
        async getTableData() {
            let params = {
                ...this.searchData,
                ...this.pager
            }
            return warningList(params)
        }
    }
}
</script>