一步一步学习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 条评论
登录 后参与评论

相关文章

来自专栏文渊之博

数据库副本的自动种子设定(自增长)

背景 在 SQL Server 2012 和 2014 中,初始化 SQL Server Always On 可用性组中的次要副本的唯一方法是使用备份、复制和还...

26611
来自专栏WeTest质量开放平台团队的专栏

Linker加载so失败问题分析

原文链接:https://wetest.qq.com/lab/view/421.html

751
来自专栏狮乐园

在 redux 中集成 angular di 机制

最近一直在折腾redux相关的东西,算然说官方鼓励的使用方式是将redux和react一起使用,但并不影响我们在其他的mvvm框架中使用它。

953
来自专栏云加新鲜事儿

智能云上手指南:如何将历史数据迁移到万象优图

6 月 21 日,腾讯云在 2017「云+未来」峰会上推出了战略新品——智能云,宣布将腾讯积累近 20 年的 AI 能力向政府、企业和开发者开放,其中首批开放计...

1783
来自专栏各种机器学习基础算法

EasyWeChat初体验

环境需求 PHP >= 5.5.9 openssl 拓展 fileinfo 拓展(素材管理模块需要用到) 安装 使用 composer(注意:他会自动检索该目录...

3527
来自专栏数据和云

MySQL DBA之路 | 性能配置调优篇

一、简介 数据库服务器需要CPU、内存、 磁盘和网络才能运行,了解这些资源对于DBA来说非常重要,因为任何的超载行为都可能成为限制因素,导致数据库服务器性能不佳...

3706
来自专栏Crossin的编程教室

Python 实战(6):放开那只海豹

有了一堆数据后,现在可以把影片详细页面做得更详细一点了。 首先能想到的,就是加上影片的海报。在从豆瓣获取的数据里,有一项 image,就是影片海报图片的地址。如...

3177
来自专栏刘明的小酒馆

事务与一致性:刚性or柔性?

在高并发场景下,分布式储存和处理已经是常用手段。但分布式的结构势必会带来“不一致”的麻烦问题,而事务正是解决这一问题而引入的一种概念和方案。我们常把它当做并发操...

71810
来自专栏数据和云

实践真知:解决 Jdbc 连接 Oracle 12c 时快时慢的问题

李真旭@killdb Oracle ACE,云和恩墨技术专家 个人博客:www.killdb.com 编辑手记:认识 JDBC 连接在不同版本间的差异,准确找出...

2934
来自专栏linux运维学习

linux学习第二十七篇:使用w查看系统负载,vmstat,top,sar,nload命令

使用w查看系统负载 w/uptime的命令结果是一样的 ? 1. 第一行从左面开始显示的信息依次为:时间,系统运行时间,登录用户数,平均负载。 ...

1857

扫码关注云+社区