2. 程式人生 > >VUE2.0 寫出增刪改查的 配合model的彈出的

VUE2.0 寫出增刪改查的 配合model的彈出的

阿新 • • 發佈：2019-01-13

vue2.0   模態框   bootstrap的結合

需要引入的檔案的

<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>

css:

   .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: table;
        transition: opacity .3s ease;
    }
    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
    .modal-container {
        width: 500px;
        margin: 0 auto;
        height:400px;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }
    .modal-body {
        padding: 20px 0;
        height:100px;
    }
    .model-footer {
        padding-top: 120px;
    }
    .modal-default-button {
        text-align: center;
    }

   .modal-enter {
        opacity: 0;
    }
    .modal-leave-active {
        opacity: 0;
    }
    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    label {
        width:50px;
    }
    #name,#sex,#age {
        width:300px;
    }
    .modal-footer {
        border:0;
    }

body的程式碼：

<div id="app">
        <div><span>搜尋</span><input type="text" v-model="search.key"></div>
        <div>
            <span>新增</span>
            <span>姓名</span><input type="text" v-model = 'newPerson.name'>
            <span>年紀</span><input type="text" v-model = 'newPerson.age'>
            <span>性別</span><input type="text" v-model = 'newPerson.sex'>
            <button class="btn  btn-primary" @click="add">新增</button>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年紀</td>
                    <td>性別</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(person,index) in people">
                    <td>{{person.name}}</td>
                    <td :style="person.age>30?'color:red':''">{{person.age}}</td>
                    <td>{{person.sex}}</td>
                    <td>
                        <button class="btn  btn-danger"  @click="del(index)">刪除</button>
                        <button class="btn  btn-primary"  @click="openTagModalCheck(person)">檢視</button>
                        <button class="btn  btn-primary"  @click="openTagModalUpdate(person, index)">編輯</button>
                    </td>
                </tr>
            </tbody>
        </table>




        <modal-check v-if="showModalCheck" @close="showModalCheck = false" :my-tag-check-l="selectTagCheck"></modal-check>
        <modal-update v-if="showModalUpdate" @close="showModalUpdate = false"  @update="update()"  :my-tag-update-r="selectTagUpdate"></modal-update>




    </div>






    <!--model的body的部分---------檢視------->
    <script type="text/x-template" id="modal-template-check">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">


                        <div class="modal-header">
                            <slot name="header">
                                資訊檢視
                            </slot>
                        </div>


                        <div class="modal-body">
                            <slot name="body">




                                <div class="form-group">
                                    <label class="col-sm-3 control-label">姓名</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="name"  class="form-control" v-model="myTagCheckL.name" disabled>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">年紀</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="age"  class="form-control" v-model="myTagCheckL.age" disabled>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">性別</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="sex"  class="form-control" v-model="myTagCheckL.sex" disabled>
                                    </div>
                                </div>


                            </slot>
                        </div>


                        <div class="modal-footer">
                            <button class="modal-default-button btn btn-primary" @click="$emit('close')">
                               關閉
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>


    <!--model的body的部分---------編輯------->
    <script type="text/x-template" id="modal-template-update">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">


                        <div class="modal-header">
                            <slot name="header">
                                資訊檢視
                            </slot>
                        </div>


                        <div class="modal-body">
                            <slot name="body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">姓名</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="name"  class="form-control" v-model="myTagUpdateR.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">年紀</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="age"  class="form-control" v-model="myTagUpdateR.age">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">性別</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="sex"  class="form-control" v-model="myTagUpdateR.sex">
                                    </div>
                                </div>


                            </slot>
                        </div>


                        <div class="modal-footer">
                            <button class=" btn btn-primary" @click="$emit('update')"  :msg = 'myTagUpdateR'>提交 </button>
                            <button class="modal-default-button btn btn-primary" @click="$emit('close')">放棄</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>

JS程式碼：

 var vm = new Vue({
            el:'#app',
            data:{
                showModalUpdate: false,
                showModalCheck: false,
                selectTagCheck:null,
                selectTagUpdate:null,


                search:{
                  key:''
                },
                newPerson:{
                  name:'阿三',
                    sex:'男',
                    age:50
                },
                people: [{
                    name: 'Jack',
                    age: 10,
                    sex: '男'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: '男'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: '女'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: '男'
                }],
                cache:{
                    index:null,
                    person:{},
                },
            },

            methods:{
                //新增
                add:function(){
                    this.people.push(this.newPerson)
                    //避免重複新增,重置新的預設物件
                    this.newPerson = {name:'阿三',sex:'男',age:50};
                },


                //刪除
                del:function(index){
                    //console.info(this.people)  //為陣列
                    this.people.splice(index,1);
                },


                //檢視--開啟model
                openTagModalCheck:function(tag){
                    //console.info(tag)
                    //開啟模態框的要求
                    this.showModalCheck = true;
                    this.selectTagCheck = tag;
                },


                //編輯--開啟model
                openTagModalUpdate:function(tag,index){
                    //console.info(tag)
                    //開啟模態框的要求
                    this.showModalUpdate = true;
                    let cache = Object.assign({},tag)
                    
                    
                    this.$set(this.cache,'person',cache);
                    this.$set(this.cache,'index',index);


                    this.selectTagUpdate = cache;
                },


                //編輯model---提交
                update:function(){
                 console.info(111)
                    let index = this.cache.index;
                    let person = this.cache.person;
                    this.$set(this.people,index,person);
                    this.showModalUpdate = false;

                }
            },

            components:{
                'modal-check':{
                    props: ['myTagCheckL'],
                    template: '#modal-template-check'
                },
                'modal-update':{
                    props: ['myTagUpdateR'],
                    template: '#modal-template-update'
                }
            }
        })




線上效果檢視：http://runjs.cn/code/bnzeisn5

相關推薦

VUE2.0 寫出增刪改查的 配合model的彈出的

vue2.0   模態框   bootstrap的結合 需要引入的檔案的 <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">

python 3.0 字典的增刪改查

name 列表 不可變 date 特點 返回 方法 nds 如果 一、字典的定義方法： 1、dic = {‘name‘:‘Karen‘,‘age‘:22,‘hobby‘:‘girl‘,‘is_handsome‘:True} print(dic) #==>{‘na

spring boot 中 mybatis 直接寫 sql 增刪改查一套

思路: 1.配置每一層內容 2.在yml中配置mysql資訊 3.在mapper中配置內容sql 返回內容設定成 java.util.HashMap，輸入內容設定成string 4.在配置dao介面 5.可直接執行查詢和修改都ok   java控制

Mybatis1.0——框架入門，從0到簡單增刪改查資料

JavaWeb框架學習文章 首先是準備Mybatis的jar包 Mybatis下載地址 1，匯入Mybatis-x.x.x.jar和lib中的依賴包 2，匯入要使用的資料庫的驅動包 3，建立一個config檔案，在config資料夾下建立一個log4j.prop

laravel增刪改查（model層）

laravel增刪改查 protected $table = 'user_city'; public $timestamps = false; //新增 返回id public function cityadd($data)

vue2 + iview-admin 1.3 + django 2.0 一個最簡單的增刪改查例子

iview-admin axios django 前後端分離 api 以下為利用iview-admin + django 做的一個最基本的增刪改查例子。 前端iview-admin git clone https://github.com/iview/iview-admin.git cd

VUE2.0增刪改查附編輯新增model(彈框)元件共用

Vue實戰篇（增刪改查附編輯新增model(彈框)元件共用） 前言 最近一直在學習Vue,發現一份crud不錯的原始碼 預覽連結 https://taylorchen709.github.

IDEA 下寫出第一個 SSH 整合框架練手專案（四，部門和員工的增刪改查完成）

這是SSH 整合專案的第三章，第一章基於Meavn 整合 Spring 和 Hibernate 框架並進行了進行了自動建表，第二章則在此基礎上加入 Struts 2 框架以及完成一個簡單的登陸頁面。第三章主要側重於分頁查詢功能的實現，第四章則著重完善增刪改查程式碼，因為

NetCore2.0 RozarPage自動生成增刪改查

sig system seda api 點擊 text cti .cn 工具 原文鏈接：https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/web-api-help-pages-using-swag

6.15ajax寫數據庫的增刪改查

foo pac warning ttr TE dismiss cursor 獲得 meta <!--<!DOCTYPE html>--> <html lang="zh"> <head> <meta charse

ext3.0 增刪改查集中到一個頁面

ext3.0 ，很新穎，很可能代表著未來B/S架構頁面框架的方向。 在用ext的時候，發現幾個小問題: 1.包的路徑不明確。嵌入的頁面沒有放到web-root目下的請求前要加../但是通過window.showModuleDialoge彈出的頁面則不需要加 2.在建樹的時候總會出現樹節點

ef6.0增刪改查操作

案例程式碼如下： Model1Container ef = new Model1Container(); //查詢 var liuyan = ef.LiuYan.Where(m => m.BH == "1").FirstOrDefault(); //查詢後更新 liuyan.QQ = "11838

分享一個自己寫的MVC EF 增刪改查 無重新整理分頁程式

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

javascript 表格增刪改查 排序不會（第一次寫部落格，求交流哈）

  學習JS快1個月了，博主本人上的是培訓的，快考試了，補習下學過的 發下今晚寫的吧。。。 有大神看看我的這種程度，排序事件怎麼弄~~ <!DOCTYPE html><html lang="zh"><head>    <

純JavaScript寫一個對錶格的簡單增刪改查操作

功能:     新增表格資料，   修改表格資料，  刪除表格資料。 不完善區:  刪除資料之後序號沒有做處理 ，表單驗證簡單的提示警告， 沒有文字提醒。 介面: 線上檢視 下面是程式碼:

Think php5.0 簡易增刪改查的幾種寫法

1):載入模板 建立對應模板時,模板的資料夾名與類名 (控制器名) 保持一致 模板檔名與載入的 類 方法名保持一致    1:使用助手函式        return view('index',[     &n

Servlet中請給出一個Cookie的增刪改查的例子。

2.Servlet與Cookie：（視訊下載） （全部書籍） 馬 克-to-win：Cookie有點像Session。Session是把鍵值對存在伺服器端，一個Servlet存值 ，另外一個Servlet可以取值。Cookie也是以鍵值對的形式用於讀取，不過是儲存在客戶端 瀏覽器的某個文本

如何寫一個完整課堂管理系統（資料庫增刪改查）

　　一直在聽建民老師說，javaweb的精髓是Jsp+servlet+javabean。在完成這個系統之前，畢竟沒有學習過javaweb，Jsp和servlet我是知道的，但不會在servlet和jsp之間相互傳值以及應用，javabean是一點沒有聽說過。在這樣的基礎下，沒辦法逃脫測試的情況下，只能硬著頭皮

現要求你寫一個簡單的員工資訊增刪改查程式.

1,Alex Li,22,13651054608,IT,2013‐04‐01 2,Jack Wang,28,13451024608,HR,2015‐01‐07 3,Rain Wang,21,13451054608,IT,2017‐04‐01 4,MacQiao,44,1

微服務架構實戰篇（三）：Spring boot2.0 + Mybatis + PageHelper實現增刪改查和分頁查詢功能

簡介 該專案主要利用Spring boot2.0 +Mybatis + PageHelper實現增刪改查和分頁查詢功能，快速搭建一套和資料庫互動的專案。 小工具一枚，歡迎使用和Star支援，如使用過程中碰到問題，可以提出Issue，我會盡力完善該Starter 版本基礎