iview怎么通过点击事件来删除选中的表数据

发布网友发布时间：2022-04-23 00:32

共1个回答

热心网友时间：2022-04-22 12:36

可以使用table的render方法，通过在column中定义一个按钮来实现点击获取选中的数据

<Table border :columns="columns7" :data="data6"></Table>
columns7: [
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => { //params是你选中行的数据
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: { //使用监听方法监听click事件，实现删除当前行
                                        click: () => {
                                         this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],