最近在使用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和时,会进行宽度自适应。
告辞!