Bootstrap

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 进行动态赋值,每个组件预置一次动态取用即可,但内部模板组件取用条件需自行书写判断逻辑。

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

;