avue crud实现增删改查带分页table表格自适应效果代码-html代码-BFW代码库

avue crud实现增删改查带分页table表格自适应效果代码

代码语言：html

所属分类：表格

代码描述：avue crud实现增删改查带分页table表格自适应效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/avue.css">
</head>

<body>
    <div id="app">
        <div>
            <avue-crud ref="crud" :option="option" :data="data" :page="page" v-model="obj"
                @row-del="rowDel" @row-save="handleRowSave"
                @row-update="handleRowUpdate" @size-change="sizeChange"
                @current-change="currentChange">
                <template slot="search">
                    <el-form-item label="自定义">
                        <el-input placeholder="自定义搜索" size="small" v-model="searchForm.solt" />
                    </el-form-item>
                </template>
                <template slot="searchMenu">
                    <el-button size="small">自定义按钮</el-button>
                </template>
                <template slot="menuLeft">
                    <el-button type="primary" size="small">自定义按钮</el-button>
                </template>
                <template slot="menuRight">
                    <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
                </template></avue-crud>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xlsx.full.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/avue.min.js"></script>


    <script>

        new Vue({
            el: "#app",
            data: function () {
                return {
                    obj: {},
                    searchForm: {},
                    page: {
                        //pageSizes: [10, 20, 30, 40],默认
                        currentPage: 1, // 当前页数
                        total: 3, // 总页数
                        pageSize: 2// 每页显示多少条
                    },
                    data: [],
                    option: {
                        excelBtn: true,
                        printBtn: true,
                        title: '表格的标题',
                        page: true,
                        align: 'center',
                        menuAlign: 'center',
                        column: [{
                            label: '姓名',
                            prop: 'name',
                            search: true,
                        },
                            {
                                label: '性别',
                                prop: 'sex'
                            }, {
                                label: "日期",
                                prop: "date",
                                type: "date",
                                format: "yyyy-MM-dd hh:mm:ss",
                                .........完整代码请登录后点击上方下载按钮下载查看