iview 表格可编辑

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
 
<div id="app">
    <i-table border :columns="columns2" :data="data3"></i-table>
</div>
 
<script>
    
    var app = new Vue({
        el: '#app',
        data () {
            return {
                    columns2: [
                        {
                            width: 60,
                            align: 'center',
                            render: (h, params) => {
                                return h('Checkbox', {
                                    props: {
                                        value: params.row.$isEdit,
                                    },
                                    on: {
                                        'on-change': function (state) {
                                            console.log(state);
//不用iview table自带的CheckBox 自己重构一个 点击赋值
                                            params.row.$isEdit = state
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age',
                            render: (h, params) => {
    
                                if (params.row.$isEdit) {
                                
                                return h('input', {
    
                                    domProps: {
                                        value: params.row.age
                                    },
                                    on: {
                                        input: function (event) {
                                            params.row.age = event.target.value
                                        }
                                    }
                                });
                                } else  {
                                
                                return h('div', params.row.age);
                                }
                            }
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        },
                        {
                            title: 'Action',
                            key: 'action',
                            render: (h, params) => {
                                return h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small'
                                        },
                                        on: {
                                        click: () => {
                                            if (params.row.$isEdit) {
                                            this.handleSave(params.row)
                                            } else {
                                            this.handleEdit(params.row)
                                            }
                                        }
                                        }
                                    }, params.row.$isEdit ? '保存' : '编辑')
                            }
                        }
                    ],
                    data3: [
                        {
                            name: '哈哈',
                            age: 18,
                            address: '上海',
                            $isEdit: false
                        },
                        {
                            name: '啦啦',
                            age: 24,
                            address: '北京',
                            $isEdit: false
                        }
                    ]
                }
        },
        methods: {
            // select_row(selection,index){
            //     console.log('select_row',selection,index)
            //     this.$set(this.data3[index], '$isEdit', true)
            // },
            handleEdit (row) {
                console.log('handleEdit',row);
                this.$set(row, '$isEdit', true)
            }, 
            handleSave (row) {
                console.log('handleSave',row);
                this.$set(row, '$isEdit', false)
            }
        }
    })
</script>
</body>
</html>
猜你喜欢
