Recently busy, busy with work handover, busy recruiting, busy with a variety of meetings, update rarely, this one is also as the last of this introductory series, later may write some of their own experience in the front end of this piece of experience or experience, not about what framework to use, may be native js, dom, programming patterns or framework-related, such as vue such as ng, etc., the introductory chapter although each one is written more rough, mainly because I do not have a good plan, where to write to where, the overall more chaotic, but no matter how, but all involved a knowledge point of vue, which is also I do not often write blogs in a few years, so write an article before there is no an outline and planning, which I will pay attention to in the later articles.

　　 This post will fill in the rest of the holes from the last piece: the

　　 1、Edit Delete Function

　　2、New, query function

　　 First we add the delete edit function, in IView, add the delete function in the table can be used to customize the template column by using the render function, the render function is used in a similar way to the render function in vue, todolist.vue file to modify our file as follows.

<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>

Save, our webpack will automatically refresh the browser, where we can get to the following result.

Recommended>>
1、ASP NET prevents the same user from logging in at the same time
2、VisualBasic using the TextFieldParser parser to pour CSV format into the database
3、9 major phone makers join forces to snipe at WeChat applets Xiaomi Huawei OV and others join forces to launch Fast Apps
4、Cloud computing industry service standards need to be improved
5、Einsteins light

已发送

发送中