vue实现table表格的动态编辑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Monstar_hu/article/details/84874995

<template>
    <div>
         <Input size="large" style= "background-color:transparent;border:0;" />
        <Table border ref="selection" :columns="columns41" :data="addLists"></Table> 
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag: false,
                addLists:[{
                    unit: 'cedd'
                }],
                columns41: [{
                    type: 'index',
                    title: '序号',
                    width: 60
                },
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '单位',
                    key: 'unit',
                    align : 'center',
                    className: "demo",
                    render: (h, params) => {
                        return h('div', [
                            h('Input', {
                                props: {
                                    value: this.addLists[params.index].unit,
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                    display: this.flag ? '' : 'none'
                                },
                                on: {
                                    'on-blur': (event) => {
                                        this.addLists[params.index].unit = event.target.value
                                    }
                                },
                            }, ''), 
                            h('span',{
                                style: {
                                    marginRight: '5px',
                                    display: this.flag ? 'none' : ''
                                },
                            },this.addLists[params.index].unit),
                        ]);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                    display: this.flag ? 'none' : ''
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.index)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                    display: this.flag ? '' : 'none'
                                },
                                on: {
                                    click: () => {
                                        this.save(params.index)
                                    }
                                }
                            }, '保存'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
                ],
                
            }
        },
     methods: {
         edit(index) {
             this.flag = !this.flag;
         },
        save(index) {
            this.flag = !this.flag;
        },
        remove(index){
            this.addLists.splice(index, 1);
        }
     },
    }
</script>

<style>
    .demo{
        color: #FF0000;
    }
</style>