一步一步学习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会自动刷新浏览器,在浏览器中我们可以到如下结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏梧雨北辰的开发录

iOS11后32位应用升级

今天接受了一个改造旧项目的任务,据说项目唯独在iOS11上无法运行。这很容易就让我们想到与最近苹果iOS11放弃支持32位应用的事件有关。确实我在平时开发的项目...

2663
来自专栏较真的前端

关于如何做一个“优秀网站”的清单——基础篇

1785
来自专栏优启梦

全平台通用评论神器一键自动填写昵称、邮箱和网址

我们在访问网站时,看到一篇文章,想发表评论时,是否经常要在评论框里手动填写自己的昵称、E-mail 和网址等留言评论信息?重复的打字会让我们感到很乏味。 为了解...

45315
来自专栏Youngxj

全平台通用评论神器一键自动填写昵称、邮箱和网址

1763
来自专栏DeveWork

DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇《Google Fonts导致WordPress 速度问题的三个...

2137
来自专栏WindCoder

WordPress常用插件分享

6581
来自专栏星流全栈

微信小程序原理

4163
来自专栏知晓程序

如何从零开始,做一个跑步小程序?| 实战案例

1284
来自专栏WindCoder

WordPress中通过Ajax评论分页实现方法

一直看着评论一线到底,感觉有点不舒服,看到主题君欲思大大那的评论也分页了,就向大大求援了一下,大大酷酷的回了一句paginate_comments_links函...

1941
来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

2827

扫码关注云+社区