vuejs增删改（自创）

Html

Css

姓名	身份证号	电话号	操作
{{row.Name}}	{{row.Sfz}}	{{row.Phone}}	编辑 / 删除

table thead tr th {
	text-align:center;
}

//Model
    var data = {
        rows: [{
                Id: 1,
                Name: '小明',
                Sfz: 431321200109090034,
                Phone: '18773839139'
            },
            {
                Id: 2,
                Name: '小刚',
                Sfz: 412341235315263435,
                Phone: '13789768987'
            },
            {
                Id: 3,
                Name: '吉姆格林',
                Sfz: 312231332133232332,
                Phone: '15623278767'
            },
            {
                Id: 4,
                Name: '李雷',
                Sfz: 312231332133232339,
                Phone: '12367787676'
            },
            {
                Id: 5,
                Name: '韩梅梅',
                Sfz: 2233278687878665435,
                Phone: '15678723214'
            },
        ],
        rowtemplate: {
            Id: 0,
            Name: '',
            Sfz: '',
            Phone: ''
        }
    };
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            Save: function(event) {
                if (this.rowtemplate.Id == 0) {
                    //设置当前新增行的Id
                    this.rowtemplate.Id = this.rows.length + 1;
                    this.rows.push(this.rowtemplate);
                }

//还原模板
                this.rowtemplate = {
                    Id: 0,
                    Name: '',
                    Sfz: '',
                    Phone: ''
                }
            },
           function(id) {
                //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。
                for (var i = 0; i < this.rows.length; i++) {
                    if (this.rows[i].Id == id) {
                        this.rows.splice(i, 1);
                        break;
                    }
                }
            },
            Edit: function(row) {
                this.rowtemplate = row;
            }
        }
    });

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

vuejs增删改（自创）

代码描述：简单的vuejs增删改代码

更新时间：2022-07-12 11:34:14

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

灰

相关代码

vuejs增删改（自创）

最新