iview-admin 使用render函数在Button中嵌套inputNumber

水果叨

已于 2022-01-20 10:49:34 修改

阅读量518

点赞数

分类专栏： Vue 文章标签： vue.js

于 2020-07-06 09:53:52 首次发布

本文链接：https://blog.csdn.net/weixin_43818659/article/details/107150248

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

{
                        title: '操作',
                        key: 'action',
                        searchable: false,
                        width: 200,
                        render: (h, params) => {
                            let row = params.row;
                            return h('div', [
                                h('Poptip', {
                                    props: {
                                        onText: '确认',
                                        cancelText: '取消',
                                        confirm: true,
                                        transfer: true,
                                        placement: 'left-start'
                                    },
                                    on: {
                                        'on-ok': () => {
                                         //   this.applyRefund(params.row);
                                        },
                                        'on-cancel': () => {
                                         //   this.btnEmpty(params.row);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        }
                                    }, '订单退款'),
                                    h('div', {
                                        slot: 'title'
                                    }, [
                                        h('p', '请输入退款金额'),
                                        h('InputNumber', {
                                            props: {
                                                size: 'small',
                                                min: 0,
                                                max: 10000,
                                                value: row.inputVal
                                            },
                                            on: {
                                                'on-change': (e) => {
                                                    this.tableData[params.index]['inputVal'] = e;
                                                }
                                            },
                                            style: {
                                                marginTop: '10px'
                                            }
                                        })
                                    ])
                                ]),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    on: {
                                        'click': () => {
                                         //   this.orderQuery(params.row);
                                        }
                                    }
                                }, '查询订单状态')
                            ]);
                        }
                    }

注意这里的InputNumber双向绑定的值是在页面初始获取数据的时候添加一个对应key值,数据发生改变时找到当前索引data对应的key将值传过去。

getOrderList(data).then(res => {
                    for (let i = 0; i < res.data.length; i++) {
                        res.data[i]['inputVal'] = null;
                    }
                    this.tableData = res.data;
                    this.$Message.success('获取信息成功！');
                }).catch(() => {
                    this.$Message.error('通信失败！');
                }).finally(() => {
                    this.load = false;
                });