动态表单中复杂组件的赋值

最新推荐文章于 2024-01-09 18:23:18 发布

疯一般的小猪仔

最新推荐文章于 2024-01-09 18:23:18 发布

阅读量835

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/u012420737/article/details/118191570

版权

背景
我使用vant-ui+vue实现动态表单的增加和删除，但是遇到类似日期和actionSheet此类组件不知道如何设置数组对象的值

在查阅组件的api时，我发现该类组件大多都无法传递我们额外定义的数据，强制传递既会报错并且也达不到我想要的结果。

困扰了我很久之后，在看之前代码寻找灵感的时候，突然想我为何不在外层fieid组件上处理显隐的时候将当前的item和index传递到data中定义的变量中呢

html

<van-field
	is-link
	 label="类型"
	 name="type"
	 v-model="item.type"
	 @click="showType(item, index)"
/>
<van-action-sheet
	v-model="item.isTypeShow"
	:actions="afford_type"
	@select="onSelect"
/>

data

data() {
	return {
		activeIndex: -1,
		activeItem: ''
	}
}

methods

methods: {
	// 显示类型弹窗
	showType(item, index) {
		item.isTypeShow = true
		this.$set(this.recordList, index, item)
		this.activeIndex = index
		this.activeItem = item
	},
	// 选择类型
	onSelect(value) {
		this.activeItem.type = value.name
		this.activeItem.isTypeShow = false
		this.$set(this.recordList, this.activeIndex, this.activeItem)
		this.activeIndex = -1
		this.activeItem = ''
	},
}

心得和反思

突然觉得index这个东西在处理数组类型的数据的时候真的是百试不爽，比如单选按钮、列表展开和收起等等
也许有时候跳出来是一件好事情，困在一个地方久了，思路容易受限，就像我不应该执着于怎么从组件本身解决问题，有时候也可以从它的外层，从它的父级着手。比如button组件，可能大小与设计稿不符，之前我会粗暴的修改组件本身的样式，但是慢慢的我也学会了给它外层嵌套div来达到我的目的。
条条大路通罗马，优雅先放到一边，解决问题才是第一目标