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

一步一步学习Vue(十三)

 

上一篇:ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)


下一篇:Nodejs.sublime-build 在sublime3中的配置