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

代码语言:html

所属分类:表格

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

代码标签: 删改 查带 分页 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 () {
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0