一步一步学习Vue（十三）

最新推荐文章于 2022-05-23 22:03:54 发布

JerremyZhang

最新推荐文章于 2022-05-23 22:03:54 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/JerremyZhang/article/details/86157257

本文介绍如何在Vue.js项目中实现todolist功能，包括编辑、删除、新增和查询等操作，并通过IView UI框架的表格组件进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一步一步学习Vue（十三）

2018-04-19 14:00 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑

最近比较忙，忙着工作交接，忙着招人、忙着各种会，更新很少，这一篇也是作为本入门系列的最后一篇了，以后可能会写一些自己在前端这块的心得或者体会了，无关乎使用什么框架，可能就是原生的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>