zoukankan      html  css  js  c++  java
  • 一步一步学习Vue(十三)

          最近比较忙,忙着工作交接,忙着招人、忙着各种会,更新很少,这一篇也是作为本入门系列的最后一篇了,以后可能会写一些自己在前端这块的心得或者体会了,无关乎使用什么框架,可能就是原生的js、dom、编程模式或者框架相关,比如vue比如ng等等,入门篇虽然每一篇都写的比较粗糙,主要是因为我没有一个好的规划,想到哪里写到哪里,整体比较乱,不过无论怎样,但是都涉及了vue的一个知识点,这也是我几年内不常写博客,所以写一篇文章之前没有一个大纲和规划,这一点我会在后期的文章中注意。

      这一篇文章会把上一片剩下的坑填一下:

      1、编辑删除功能

      2、新增、查询功能

      首先我们添加删除编辑功能,在IView中,在表格中添加删除功能可以使用自定义模版列的方式,使用render函数,该render函数使用方式和vue中render函数类似,todolist.vue文件中修改我们的文件如下:

    <template>
        <Table border :columns="columns" :data="items"></Table>
    </template>
    <script>
    export default{
        data(){
            return {
                columns:[
                    {
                        title:'Id',
                        key:'id'
                    },
                    {
                        title:'title',
                        key:'title',
                    },
                    {
                        title:'desc',
                        key:'desc'
                    },
                    {
                        title:'actions',
                        render:(createElement,params)=>{
                            return createElement('div',[
                                createElement('Button',{
                                    props:{
                                        type:'primary',
                                        size:'small',
                                    },
                                    on:{
                                        click:()=>{
                                            this.remove(params.row.id);
                                        }
                                    }
                                },'remove'),
                               
                                createElement('Button',{
                                    props:{
                                        type:'error',
                                        size:'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.edit(params.row);
                                        }
                                    }
                                },'edit')
                            ])
                        }
                    
                    }
                ]
            }
        },
        props:[
            'items'
        ],
        methods:{
            edit: function (todo) {
                console.log(todo);
                   this.$store.commit('edit',todo);
                },
            remove: function (id) {
                console.log(id);
                    this.$store.commit('remove',{id:id});
            }
        }
    }
    </script>

    保存,我们的webpack会自动刷新浏览器,在浏览器中我们可以到如下结果:

     

  • 相关阅读:
    [原创]基于asp.ent MVC的无刷新文件上传组件
    ATL 开发 Com 学习笔记
    杀毒软件—美杜杉(medusa)使用观后感1
    IIS gzip压缩
    常用网页播放器代码
    [转]安装AspNetMVC1RC2出错
    Asp.net 异步请求 IHttpAsyncHandler
    发几个小的测式软件
    [转]关于document.cookie的使用
    boost Serialization
  • 原文地址:https://www.cnblogs.com/Johnzhang/p/7354833.html
Copyright © 2011-2022 走看看