Vue对数据的增删改

最新推荐文章于 2024-05-06 22:33:41 发布

SmlieAgain

最新推荐文章于 2024-05-06 22:33:41 发布

阅读量617

点赞数

文章标签： html css javascript jquery

本文链接：https://blog.csdn.net/weixin_47174945/article/details/108810768

版权

Vue对数据的增删改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid rebeccapurple;
            /* width: 10px;
            height: 30px; */
        }
        
        td {
            border: 1px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div>
            <datalist id="cars">
            <option v-for="item in searchlist" :value="item"></option>
        </datalist>
            <input type="button" class="add" @click="add" value="新增" />
        </div>
        <div>
            <table>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>班级</th>
                    <th>性别</th>
                    <th>省份</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr v-cloak v-for="(item, index) of slist">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.username }}</td>
                    <td>{{ item.code }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.province }}</td>
                    <td>{{ item.hobby.join(' | ') }}</td>
                    <td>
                        <a href="javascript:;" @click="showOverlay(index)">修改</a> |
                        <a href="javascript:;" @click="del(index)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('model', {
        props: ['list', 'isactive'],
        // 新增 修改的弹窗
        template: `<div class="overlay" v-show="isactive">
                <div class="con">
                    <h2 class="title">新增 | 修改</h2>
                    <div class="content">
                        <table>
                            <tr>
                                <td>用户名</td>
                                <td><input type="text" v-model="modifylist.username"></td>
                            </tr>
                            <tr>
                                <td>班级</td>
                                <td><input type="text" v-model="modifylist.code"></td>
                            </tr>
                            <tr>
                                <td>性别</td>
                                <td>
                                    <label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
                                    <label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
                                    <label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
                                </td>
                            </tr>
                            <tr>
                                <td>省份</td>
                                <td>
                                    <select name="" id="" v-model="modifylist.province">
                                        <option value="湖南省">湖南省</option>
                                        <option value="北京市">北京市</option>
                                        <option value="河北省">河北省</option>
                                        <option value="河南省">河南省</option>
                                        <option value="重庆市">重庆市</option>
                                        <option value="广东省">广东省</option>
                                        <option value="辽宁省">辽宁省</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>爱好</td>
                                <td>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
                                    <label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
                                </td>
                            </tr>
                        </table>
                        <p>
                            <input type="button" @click="changeActive" value="取消">
                            <input type="button" @click="modify" value="保存">
                        </p>
                    </div>
                </div>
            </div>`,
        computed: {
            modifylist() {
                return this.list;
            }
        },
        methods: {
            changeActive() {
                this.$emit('change');
            },
            modify() {
                this.$emit('modify', this.modifylist);
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            isActive: false, // 是否显示弹窗
            selected: -1, // 选择了哪条记录
            selectedlist: {}, // 选中的信息
            slist: [],
            searchlist: [],
            list: [{
                username: '张三',
                code: '193411',
                sex: '男',
                province: '湖南省',
                hobby: ['篮球']
            }, {
                username: '李四',
                code: '193412',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴']
            }, {
                username: '王五',
                code: '193421',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }, {
                username: '赵六',
                code: '13441',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', ]
            }, {
                username: '小花',
                code: '193451',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', ]
            }, {
                username: '小红',
                code: '193541',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }]
        },
        created() {
            console.log(this.list)
            this.setSlist(this.list);
        },
        methods: {
            // 修改数据
            showOverlay(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.changeOverlay();
            },
            // 点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    Vue.set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                    this.list.push(arr);
                }
                this.setSlist(this.list);
                this.changeOverlay();
            },
            add: function() {
                this.selectedlist = {
                    username: '',
                    code: '',
                    sex: '男',
                    province: '北京市',
                    hobby: []
                };
                this.selected = -1;
                this.isActive = true;
            },

            del(index) {
                this.list.splice(index, 1);
                this.setSlist(this.list);
            },
            changeOverlay() {
                this.isActive = !this.isActive;
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
                this.slist = JSON.parse(JSON.stringify(arr));
            },

        },
        watch: {}
    });
</script>

</html>

SmlieAgain

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue对数据的增删改

Vue对数据的增删改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table
复制链接

扫一扫