一步一步学习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会自动刷新浏览器，在浏览器中我们可以到如下结果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读