vue-table数据增删改查真分页

最新推荐文章于 2023-09-27 17:10:48 发布
最新推荐文章于 2023-09-27 17:10:48 发布
阅读量234 收藏
点赞数
原文链接：http://www.cnblogs.com/fengzh/p/9308500.html
版权

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <link href="~/Content/Iview/iview.css" rel="stylesheet" />
    <script src="~/Scripts/IView/iview.min.js"></script>
    <script src="~/Scripts/axios.min.js"></script>
    <script src="~/Scripts/vee-validate2/vee-validate.js"></script>
    @*<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>*@

    <style scoped>
        .paging {
            float: right;
            margin-top: 10px;
        }
        input.invalid {
            border-color: red;
        }
        .errorColor {
            color: red;
        }
    </style>
</head>
<body>
    <div>
    </div>

    <div id="app1">
        {{ message }}
    </div>
 
    <div id="app2" >

        <input type="text" v-model="params.FName" placeholder="输入关键字查询" />
        <button v-on:click="queryData">查询</button>
        @*<p v-for="item in data">
                {{item.userName}}
            </p>*@
        <template>
            <i-table border v-bind:loading="page.loading" v-bind:columns="historyColumns" v-bind:data="data"></i-table>
            <Page ref="pages" placement="top" size="small"
                  show-total show-sizer
                  :current="params.offset" :page-size="params.limit"
                  :total="page.totalCount" :class="paging"
                  :show-elevator="true"
                  @*注意这里的page-size-opts绑定，不支持省略v-bind绑定*@
                  v-bind:page-size-opts="page.arrPageSize"
                  @@on-change="changePage" @@on-page-size-change='handlePageSize'>
            </Page>
        </template>

        <form novalidate>
            <template>
                @*<Button v-on:click="modelDialogOk.modal = true">用户添加</Button>*@
                @*添加数据弹层*@
                <Modal v-model="modelDialogOk.modal"
                       title="二开用户添加"
                       @@on-ok="ok" v-bind:loading="modelDialogOk.loading"
                       @@on-cancel="cancel">
                    <content>
                        <p>ID:{{user.ID}}</p>
                        <p>账号/姓名：{{user.userName}}</p>
                        <div>
                            权限：<Select name="writeRight" v-model="model_right" >
                                <option value="" key="">请选择</option>
                                <Option v-for="item in rightData" v-bind:value="item.writeRight" v-bind:key="item.writeRight">{{ item.writeRight }}</Option>
                            </Select>
                        </div>
                        <br />
                        <div v-bind:class="modelDialogOk.errorColor">{{errorMsg}}</div>
                    </content>
                </Modal>
                @*删除提醒*@
                <Modal v-model="modelDialogDelete.modal"
                       title="确定删除二开账户吗?"
                       @@on-ok="del" v-bind:loading="modelDialogDelete.loading"
                       @@on-cancel="cancel">
                    <content>
                        <p>ID:{{user.ID}}</p>
                        <p>账号/姓名:{{user.userName}}</p>
                    </content>
                </Modal>
            </template>
        </form>
    </div>
    <script>
        var vm1 = new Vue({
            el: '#app1',
            data: {
                message: '用户列表：'
            }
        });
    var vm2=new Vue({
        el: '#app2',
        data: {
            //csss类
            paging: "paging",
            //数据
            data: [],
            rightData: [],
            model_right: '',
            historyColumns: [
                          {
                              title: 'ID',
                              key: 'ID'
                          },
                         {
                            title: '用户',
                            key: 'userName',
                            render: (h, params) => {
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'person'
                                        }
                                    }),
                                    h('strong', params.row.userName)
                                ]);
                            }
                         },
                         {
                             title: "权限组",
                             key: "writeRight"
                         },
                         {
                             title: 'Action',
                             key: 'action',
                             width: 180,
                             align: 'center',
                             render: (h, params) => {
                                 return h('div', [
                                     h('Button', {
                                         props: {
                                             type: 'primary',
                                             size: 'small'
                                         },
                                         attrs: {
                                             //根据内容设置添加按钮是否可用
                                             disabled: vm2.data[params.index].writeRight.indexOf("不存在")> -1 ? false : true
                                         },
                                         style: {
                                             marginRight: '5px'
                                         },
                                         on: {
                                             click: () => {
                                                 vm2.showAddData(params.index)
                                             }
                                         }
                                     }, '添加'),
                                     h('Button', {
                                         props: {
                                             type: 'success',
                                             size: 'small'
                                         },
                                         attrs: {
                                             //根据内容设置添加按钮是否可用
                                             disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
                                         },
                                         style: {
                                             marginRight: '5px'
                                         },
                                         on: {
                                             click: () => {
                                                 vm2.editData(params.index)
                                             }
                                         }
                                     }, '编辑'),
                                     h('Button', {
                                         props: {
                                             type: 'error',
                                             size: 'small'
                                         },
                                         attrs: {
                                             //根据内容设置添加按钮是否可用
                                             disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
                                         },
                                         on: {
                                             click: () => {
                                                 vm2.showDelete(params.index)
                                             }
                                         }
                                     }, '删除')
                                 ]);
                             }
                         }
            ],
            page:{
                //分页数
                arrPageSize: [10, 20, 30, 40,50,100],
                分页大小
                //pageSize: 10,
                // //当前页面
                //pageCurrent: 1,
                //总分页数
                pageCount: 1,
                //总数
                totalCount: 80,
                //表格是否加载中
                loading:false
            },
            params: {
                //需要跳转的页面，pageCurrent
                offset: 1,
                //页大小
                limit: 10,
                //关键字查询
                FName: ""
            },
            user: {
                ID: "",
                userName: "",
                index: 0, //只是表格行序号，与用户表对象没联系，用户删除后台数据前同时删除表格当前行数据
                isEdit:false
            },
            errorMsg:"",
            modelDialogOk: {
                modal: false,
                loading:true,
                errorColor: "errorColor"
            },
            modelDialogDelete: {
                modal: false,
                loading: true,
                errorColor: "errorColor"
            },
        },
        beforCreate() {
                    },
        created() {
            this.getRight();
            this.queryData();
         },
        watch: {
            FName: function (val) {
                this.params.FName = val;
            }
        },
        methods: {
            //从二开用户表获取权限
            getRight() {
                     axios.post("/Sys/ExUser/GetRight", this.params).then((res) => {
                    this.rightData = res.data;
                })
            },
            //查询表数据
            queryData() {
                this.page.loading = true;
                axios.post("/Sys/ExUser/GetK3Users", this.params).then((res) => {
                    this.data = res.data.data;
                    this.page.totalCount = res.data.total;
                    var a = this.page.totalCount % 10;
                    this.page.pageCount = a == 0 ? parseInt(this.page.totalCount / 10) : parseInt(this.page.totalCount / 10) + 1;
                })
                this.page.loading = false;
            },
            changePage(index) {
                this.params.offset = index;
               // this.page.pageCurrent = index;
                this.queryData();
               },
            handlePageSize(value) {
                this.params.limit = value;
              //  this.page.pageSize = value
                this.queryData();
            },
            showAddData(index) {
                this.user.index = index;
                this.model_right = "";  //权限默认选项
                this.modelDialogOk.modal = true;  //弹层
                this.user.ID=this.data[index].ID;
                this.user.userName = this.data[index].userName;
                this.user.isEdit = false;
                //this.$Modal.info({
                //    title: 'User Info',
                //    content: `ID：${this.data[index].ID}<br>姓名&账号：${this.data[index].userName}`
                //});
            },
            editData(index) {
                this.user.index = index;
                this.model_right = this.data[index].writeRight;  //权限默认选项
                this.modelDialogOk.modal = true;  //弹层
                this.user.ID = this.data[index].ID;
                this.user.userName = this.data[index].userName;
                this.user.isEdit = true;
            },
            removeData(index) {
                this.data.splice(index, 1);
            },
            changeLoading(){
                this.modelDialogOk.loading = false;
                this.$nextTick(() => {
                    this.modelDialogOk.loading = true;
                });
            },
            showDelete(index) {
                this.model_right = "";  //权限默认选项
                this.modelDialogDelete.modal = true;  //弹层
                this.user.ID = this.data[index].ID;
                this.user.userName = this.data[index].userName;
                this.user.index = index;
                this.user.isEdit = false;
            },
            ok () {
                   if (this.model_right == "") {
                       this.errorMsg = "数据不完整";
                       return this.changeLoading();
                   }
                   else {
                       var status = 200;
                       var msg = "添加数据成功";
                       var url = "/Sys/ExUser/Add";
                       if (this.user.isEdit) {
                           url = "/Sys/ExUser/Edit";
                           msg = "修改数据成功";
                       }
                       axios.post(url, {
                           fname: this.user.userName,
                           writeRight: this.model_right
                       }).then((res) => {
                           status = res.data.Status;
                           msg = res.data.msg;
                           if (status == 200) { this.data[this.user.index].writeRight = this.model_right; }
                       });                     
                      
                       this.$Message.info(msg);
                       setTimeout(() => {
                           this.changeLoading();
                           this.modelDialogOk.modal = false;                          
                       }, 1000);
                       return false;
                   }
              
            },
            del() {
                var status = 200;
                var msg = "删除数据成功";
                axios.post("/Sys/ExUser/Delete", {
                    fname: this.user.userName
                }).then((res) => {
                    status = res.data.Status;
                    msg = res.data.msg;
                });
                this.$Message.info(msg);
                setTimeout(() => {    
                    this.modelDialogDelete.modal = false;
                }, 1000);
                if (status == 200) { this.data.splice(this.user.index, 1); }
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
        }
    });

    </script>
 

</body>
</html>

 

转载于:https://www.cnblogs.com/fengzh/p/9308500.html

weixin_30703911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现表格增删改查效果的实例代码
08-29
本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE20增删改查附编辑添加model弹框组件共用
08-09
VUE2.0增删改查附编辑添加model(弹框)组件共用
vue+element ui搭建的DEMO增删改查+分页+导出
02-16
增删改查功能是Web应用的核心，Element UI提供了诸如表格（Table）、对话框（Dialog）、表单（Form）等组件，帮助开发者轻松实现这些功能。例如，Table组件可以显示数据列表，通过自定义列模板实现编辑按钮；Form...
vue后台管理项目增删改查规范代码
08-24
在这个“vue后台管理项目增删改查规范代码”中，我们可以看到一个典型的管理系统的CRUD（创建、读取、更新、删除）操作实现。 在后端开发中，CRUD是基本的数据操作，而在前端，这些功能通常通过API接口与后端交互来...
vue自动化创建简单的模块，简单的table查询增删改查页面
04-22
在构建Web应用时，尤其在处理数据展示、交互和管理功能时，常常需要创建包含查询、增删改查（CRUD）操作的表格页面。本教程将介绍如何使用Vue.js自动化创建这样的模块。 首先，我们需要安装必要的工具。`plop`是一...
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
10-19
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
vue+element-ui优雅的实现表格的增删改查
热门推荐
weixin_42565137的博客
06-03 1万+
aaa
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
08-28
主要介绍了从vue基础开始创建一个简单的增删改查的实例代码，需要的朋友参考下
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
VueJs初步学习，一个表格的增删改查
weixin_30916125的博客
09-08 138
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJs学习测试</title> <link rel="stylesheet" href="./node_modules/bootstrap/...
vue项目table插件，集成增删改查，分页。plug-table-zwb
qq_38323658的博客
09-15 941
非常好用的table插件。集成增删改查功能，集成翻页筛选等功能。 您只需要引入组件，传必要的参数。就可以生成漂亮的表格。 改组件基于elementUi 是它的再次封装。 效果图 引入 npm install plug-table-zwb --save 引用 //main.js import wbtable from 'plug-table-zwb'; Vue.use(wbtable); 使用 //组件引入 <wbtable ref="wbtable" //组件名称，方便调
vue datatables 实现动态刷新
lixiwoaini的博客
06-23 5597
需求描述：最近需要写一个界面，主要功能是实现模态框的动态刷新 问题：可是涉及到自动刷新就有问题了，因为每次获取数据都是全量数据，用dataTable组装表格的话，页面会一直一直闪！里面绘制的表格会不断出现异常 如图这个是我做好的动态刷新，下面的请求是每隔5秒刷新一次，解决问题的主要方法如下（最终解决方法是在datatables的API 中找到的）： <templa...
组件间的信息传递，通过prop向子组件传递数据
GXing007的博客
07-04 666
prop是可以在组件注册上的一些自定义特性，当一个值传递给prop特性的时候，它就变成了一个组件实例的属性。eg：子组件中写法 export default{ props: ['rows'] }&lt;el-table :data="rows" style="width: 100%;" :show-h...
Vue组件数据的动态刷新✧٩(ˊωˋ*)و✧
jingtian678的博客
01-07 5069
考虑这样一种情况，Vue 的父组件根据接口 api 获取到数据后，动态更新到子组件的 props 上，这本身也是一个较为简单的操作, // 父组件 &lt;template&gt; &lt;div class="hello"&gt; &lt;chart :info='info'/&gt; &lt;/div&gt; &lt;/template&gt;   在子组件上把数据，直...
vue 对表格的增删改查
weixin_63493262的博客
03-31 2438
Vue是一个用于构建用户界面的JavaScript框架，在Vue中可以通过使用Vue组件来实现对表格的增删改查操作。下面将介绍一些基础的Vue组件和技术来实现对表格的增删改查操作
【Vue】数据表格增删改查与表单验证
最新发布
让优秀成为一种习惯！
09-27 1660
Vue框架与后台交互实现数据表格增删改查与表单验证
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值