iview render表格中渲染表单及验证

最近在使用iview开发项目，实践埋坑

1. 在iview表格中渲染表单，并进行验证

如图： 

看了官方的table组件， 首先想到的是render方法实现

使用render方法实现

{
    title: '礼金编号',
    key: 'activity_code',
    align: 'center',
    width: 100,
    render: (h, params) => {
        /**
         * div 元素标签
         * {} 元素属性如: props style on
         * [] 子元素 ...
         */
        return h('div', {}, [
            h('Input', {
                props: {
                    placeholder: '请输入编号',
                    value: this.data[params.index].val
                },
                on: {
                    'on-change': (e) => {
                        console.log(e.tarage.value)
                    }
                }
            })
        ])
    }
}

绑定value实现双向数据绑定，但是这时候会有两个问题

1. 在输入时候每次进行复制 会跳出焦点，不聚焦, 这个网上有两种解决方法

每次输入整行赋值  点击解决对应链接

每次输入获取焦点  点击解决对应链接

2. 就比如说你做表单验证时, 赋值数据与视图渲染数据不同如:  当我输入框中输入的内容为'123' 那么我把该内容改成'456',第一次是可以的，剩下几次就不行了， 

'on-change': (e) => {
    if (e.target.value === '123') {
        this.data[params.index].val = '456'
        console.log(this.data[params.index].val)
    }
}

然后试了一下再套·一层Form表单验证, 还是不太乐观，rules验证只能判断value的默认值， 不是输入的值。不可取

---

换个思路

使用iview table组件中的slot slot-scope

columns: [{
    {
        title: 'Name',
        slot: 'name'
    }
}]

<Table :columns='columns'  border :data='data'>
    <template slot-scope="{ row }" slot="name">
        <Input v-model='row.name'></Input>
    </template>
</Table>

在template中可以使用form表单进行表单验证，但是这个api是新增api 只支持 iview 3.2.0 以上版本

现在使用的版本是 iview3.1.5  所以还不能使用这个新特性,查阅资料,大体上还是slot的思路去做的

<template slot='name' slot-scope='props'>
    <Form :ref='"coupon" + props.ind' :model='props.row' :rules='rules'>
        <FormItem prop='name'>
            <Input v-model='props.row.name' placeholder='请输入礼金编号'/>
        </FormItem>
    </Form>
</template>

render: (h, params) => {
    this.data[params.index] = params.row
    return h(
        'div',
        this.$refs.couponTable.$scopedSlots.name({
            row: params.row,
            ind: params.row._index
        })
    )
}

适合3.15版本， 把需要做的表单验证都在写rules，对应参数即可，

再pick一个小技巧, 想让ivieiw 中的table表格，宽度自适应， 但是有一个最低宽度来保证展示内容的完整性， 其余可以自适应，在每一个columns中给需要展示内容的地方一个minWidth: xx 这样在屏幕变化时 如果屏幕可视窗口小于minWidth的大小，时候 table会出现横向滚动条， 屏幕可视窗口大于minWidth和时，会进行宽度自适应。

告辞!