Vue實現增刪改查功能

時間 2019-11-11
標籤 vue 實現增刪功能简体版
原文原文鏈接
簡單的表單CURD功能demojavascript
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/vueCurd420.css" />
        <style>
            /* 
             */
            
            #grid-template,
            #dialog-template {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="container">
                <div class="form-group">
                    <label>Search</label>
                    <input type="text" class="search-input" v-model="searchQuery" />
                </div>

            </div>
            <div class="container">
                <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">
                </simple-grid>
            </div>
        </div>

        <template id="grid-template">
            <table>
                <thead>
                    <tr>
                        <th v-for="col in columns">
                            {{ col.name | capitalize}}
                        </th>
                        <th>
                            Delete
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(index,entry) in dataList | filterBy searchKey">
                        <td v-for="col in columns">
                            <span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a></span>
                            <span v-else>{{entry[col.name]}}</span>
                        </td>
                        <td class="text-center">
                            <button class="btn-danger" @click="deleteItem(entry)">delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="container">
                <button class="btn" @click="openNewItemDialog('Create New Item')">Create</button>
            </div>

            <modal-dialog :mode="mode" :title="title" :item="item" :fields="columns" v-on:create-item="createItem" v-on:update-item="updateItem">
            </modal-dialog>

        </template>

        <template id="dialog-template">
            <div class="dialogs">
                <div class="dialog" v-bind:class="{ 'dialog-active': show }">
                    <div class="dialog-content">
                        <header class="dialog-header">
                            <h1 class="dialog-title">{{ title }}</h1>
                        </header>
                        <div class="dialog-body">
                            <div v-for="field in fields" class="form-group">
                                <label>{{ field.name }}</label>
                                <select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
                                    <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
                                </select>
                                <input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
                            </div>
                        </div>
                        <footer class="dialog-footer">
                            <div class="form-group">
                                <label></label>
                                <button class="btn-save" v-on:click="save">Save</button>
                                <button class="btn-close" v-on:click="close">Close</button>
                            </div>
                        </footer>
                    </div>
                </div>
                <div class="dialog-overlay"></div>
            </div>
        </template>

        <script src="js/vue.js"></script>
        <script>
            Vue.component('simple-grid', {
                template: '#grid-template',
                props: ['dataList', 'columns', 'searchKey'],
                data: function() {
                    return {
                        mode: 0,
                        title: '',
                        keyColumn: '',
                        item: {}
                    }
                },
                ready: function() {
                    for(var i = 0; i < this.columns.length; i++) {
                        if(this.columns[i].isKey) {
                            this.keyColumn = this.columns[i]['name']
                            break;
                        }
                    }
                },
                methods: {
                    openNewItemDialog: function(title) {
                        // 對話框的標題
                        this.title = title
                        // mode = 1表示新建模式
                        this.mode = 1
                        // 初始化this.item
                        this.item = {}
                        // 廣播事件，showDialog是modal-dialog組件的一個方法，傳入參數true表示顯示對話框
                        this.$broadcast('showDialog', true)
                    },
                    openEditItemDialog: function(key) {
                        // 根據主鍵查找當前修改的數據
                        var currentItem = this.findItemByKey(key)
                        // 對話框的標題
                        this.title = 'Edit Item - ' + key
                        // mode = 2表示修改模式
                        this.mode = 2
                        // 將選中的數據拷貝到this.item
                        this.item = this.initItemForUpdate(currentItem)
                        // 廣播事件，傳入參數true表示顯示對話框
                        this.$broadcast('showDialog', true)
                    },
                    // 彈出修改數據的對話框時，使用對象的深拷貝
                    initItemForUpdate(p, c) {
                        c = c || {};
                        for(var i in p) {
                            // 屬性i是否爲p對象的自有屬性
                            if(p.hasOwnProperty(i)) {
                                // 屬性i是否爲複雜類型
                                if(typeof p[i] === 'object') {
                                    // 若是p[i]是數組，則建立一個新數組
                                    // 若是p[i]是普通對象，則建立一個新對象
                                    c[i] = Array.isArray(p[i]) ? [] : {};
                                    // 遞歸拷貝複雜類型的屬性
                                    this.initItemForUpdate(p[i], c[i]);
                                } else {
                                    // 屬性是基礎類型時，直接拷貝
                                    c[i] = p[i];
                                }
                            }
                        }
                        return c;
                    },
                    findItemByKey: function(key) {
                        var keyColumn = this.keyColumn
                        for(var i = 0; i < this.dataList.length; i++) {
                            if(this.dataList[i][keyColumn] === key) {
                                return this.dataList[i]
                            }
                        }
                    },
                    itemExists: function() {
                        var keyColumn = this.keyColumn
                        for(var i = 0; i < this.dataList.length; i++) {
                            if(this.item[keyColumn] === this.dataList[i][keyColumn])
                                return true;
                        }
                        return false;
                    },
                    createItem: function() {
                        var keyColumn = this.keyColumn
                        if(!this.itemExists()) {
                            // 將item追加到dataList
                            this.dataList.push(this.item)
                            // 廣播事件，傳入參數false表示隱藏對話框
                            this.$broadcast('showDialog', false)
                            // 新建完數據後，重置item對象
                            this.item = {}
                        } else {
                            alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
                        }

                    },
                    updateItem: function() {

                        // 獲取主鍵列
                        var keyColumn = this.keyColumn

                        for(var i = 0; i < this.dataList.length; i++) {
                            // 根據主鍵查找要修改的數據，而後將this.item數據更新到this.dataList[i]
                            if(this.dataList[i][keyColumn] === this.item[keyColumn]) {
                                for(var j in this.item) {
                                    this.dataList[i][j] = this.item[j]
                                }
                                break;
                            }
                        }
                        // 廣播事件，傳入參數false表示隱藏對話框
                        this.$broadcast('showDialog', false)
                            // 修改完數據後，重置item對象
                        this.item = {}
                    },
                    deleteItem: function(entry) {
                        var data = this.dataList
                        data.forEach(function(item, i) {
                            if(item === entry) {
                                data.splice(i, 1)
                                return
                            }
                        })
                    }
                },
                components: {
                    'modal-dialog': {
                        template: '#dialog-template',
                        data: function() {
                            return {
                                // 對話框默認是不顯示的
                                show: false
                            }
                        },
                        /*
                         * mode = 1是新增數據模式，mode = 2是修改數據模式
                         * title表示對話框的標題內容
                         * fields表示對話框要顯示的數據字段數組
                         * item是由simple-dialog傳下來，用於綁定表單字段的
                         */
                        props: ['mode', 'title', 'fields', 'item'],
                        methods: {
                            close: function() {
                                this.show = false
                            },
                            save: function() {
                                if(this.mode === 1) {
                                    // 使用$dispatch調用simple-grid的create-item事件
                                    this.$dispatch('create-item')
                                } else if(this.mode === 2) {
                                    // 使用$dispatch調用simple-grid的update-item事件
                                    this.$dispatch('update-item')
                                }
                            }
                        },
                        events: {
                            'showDialog': function(show) {
                                this.show = show
                            }
                        }
                    }
                }
            })

            var demo = new Vue({
                el: '#app',
                data: {
                    searchQuery: '',
                    columns: [{
                        name: 'name',
                        isKey: true
                    }, {
                        name: 'age'
                    }, {
                        name: 'sex',
                        dataSource: ['Male', 'Female']
                    }],
                    people: [{
                        name: 'Jack',
                        age: 30,
                        sex: 'Male'
                    }, {
                        name: 'Bill',
                        age: 26,
                        sex: 'Male'
                    }, {
                        name: 'Tracy',
                        age: 22,
                        sex: 'Female'
                    }, {
                        name: 'Chris',
                        age: 36,
                        sex: 'Male'
                    }]
                }
            })
        </script>

    </body>

</html>
參考https://keepfool.github.io/vue-tutorials/02.Components/Part-2/demo/step05.htmlcss
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。