uniapp 表单页面_uniapp自定义表单模板经验分享

极简属性：data

(仅提供方法和极简示例，实践党可自行扩展，伸手党请绕行)

表单组件通用

注：此data是组件的一个隐藏属性

示例：

template：

{{sexs[grouplist.sexIndex].name}}

data：

sexs: [{name: "男"},{name: "女"}],

grouplist: {

name:'',

sexIndex:0

}

method：

inputInfo(e) {

let type = e.target.dataset.type // e.target.dataset.type中的type就是data-type中的参数

this.grouplist[type] = e.target.value // 给对象参数动态赋值

}

只需要这一个方法即可取代之前很多重复性的赋值工作，复用性极高

你可以叫 data-type 也可以起一个自己喜欢的 data-man 等等

缺点：这种template写法需要预置很多重复性的模板组件

解决思路：用 v-for 对 data-type 进行动态赋值，每个组件预置一次动态取用即可，但内部模板组件取用条件需自行书写判断逻辑。

有兴趣的道友还可以自行扩展。