uni-app的tag选中与回显

uni-app的tag选中与回显

ui框架使用的是uView，tag的使用方法详见uView官网。

1. 问题描述
   如图：希望点击时样式发生改变，并且将选中的对象push到数组里
2. 实现
   以下代码实现的是页面携带 id 跳转到需要进行回显操作的页面，
   healthRecords.vue

<view class="w375">
			<view class="healthRecords-cardList">
				<view class="cardList-item" v-for="(item, index) in userList" :key="index" @click="basicDataDetail(false,item.id,item.relationship)">
					<view>
						<view>姓名：{{ item.realName }}</view>
						<text>{{ gender }} {{ item.age }}岁</text>
					</view>
					<image src="../../../static/arrow-right.png" style="width: 20px; height:20px; "></image>
				</view>
			</view>
		</view>

basicDataDetail(false,item.id,item.relationship)方法携带id、relationship、和一个判断跳转页面是修改还是添加的布尔值，这里的判断是否为添加的变量命名为isAdd，为false时是修改。

		basicDataDetail(bol,id,res,con){
			uni.navigateTo({
				url: '/pages/addBasicData?id=' + id + '&relationship='+res+'&isAdd='+bol+'&from='+con
			})
		},

跳转至addBasicData页面，代码如下：
下边代码未做说明都在addBasicData.vue文件中

	onLoad(options) {
		//这里是利用生命周期接收上一个页面传来的值，
		//id，relationship，isAdd 是在此页面的data里定义的变量，
		//如果你能分的清除，可以选择定义其他变量名
		this.id = options.id;
		this.relationship = options.relationship
		this.isAdd = options.isAdd 
		// console.log(options.id,options.relationship,options.isAdd)
		this.getAnamnesisList(); //获取tag列表的方法，请求的后台数据，不做解释
	},

在这个页面的data里，定义的变量如下：

	data() {
		return {
		//form是添加或者修改需要上传的参数
			form: {
				relationship:0,
				oldRelationship:'',
				tenantId: "000000",
				userId: "",
				patient:{
					realName: '',
					birthday:"",
					idCard:"",
					mobile:"",
					weight:"",
					height:"",
					sex:0,
					liverKidney: 0,
					tenantId: "000000",
					userId:'',
					allergy:'', 
					//这里以allgry：过敏病史为例，其他变量不会用到
					familyIllcase:"",
					habit:'',
					illcase:'',
					id:''
				}
			},
			id:'',
			relationship:0,
			allergyList: [],
			//allergyList用来接收tag列表
			allergy: {
				content: [],
				other: ''
			},
			//allergy是选中的tag的列表
			isAdd:'',
		};
	},

获取tag列表的方法

		async getAnamnesisList() {
			await this.$http.get('/api/list?' + 'current=0' + '&size=1000').then(res => {
				if (res.code == 200) {
					let data = res.data.records
					data.forEach(item=>{
						item.plain = true;
						//给一个plain为true时代表未选中
					})
					this.allergyList = data 
				}
			});
			this.getBasicData()
		},

根据plain判断样式

		<view class="">
			<u-card margin="20rpx 0" padding="20" :border="false" :border-radius="0">
				<view slot="head" class="common-head"><text>过敏病史</text></view>
				<view slot="body" class="common-body">
					<u-tag class="common-btn" :text="item.senName" :bgColor="item.plain ? '#FFFFFF':'#1890FF'" :color="item.plain ? '#1890FF':'#FFFFFF'" shape="circle" v-for="(item, index) in allergyList" :key="index" @click="chooiceAllergy(index,item)" />
				</view>
				<view class="" slot="foot"><u-input v-model="allergy.other" placeholder="请输入内容" /></view>
			</u-card>
		</view>
		<view class="basic-button"><u-button type="primary" @click="submit">保 存</u-button></view>

点击tag并将获取到的数据push到一个列表中去的方法

		chooiceAllergy(index,item) {
			this.allergyList[index].plain = !this.allergyList[index].plain
			let data = this.allergyList
			let arr = []
			data.forEach(item=>{
				if(!item.plain){
					arr.push({
						//这里是根据接口的要求截取的一些字段，如果你不需要筛选可以直接push(item)
						id: item.id,
						tenantId: this.userInfo.tenant_id,
						name: item.senName
					})
				}
			})
			this.allergy.content = arr
			console.log(this.allergy.content)
			//this.form.patient.allergy = JSON.stringify(this.allergy)
		},

点击保存，提交数据的方法

		submit(){
			//接口需要json字符串，所以这里做了转换
			this.form.patient.allergy = JSON.stringify(this.allergy)
			this.$http.post('/api',this.form,{},'json',true).then(res=>{
				
			})

还有一个方法是用来回显数据的，当时写到这里的时候，因为少了一次赋值，导致修改数据的时候总会把原来请求回来的数据给覆盖掉，相当于将目标列表置空，又重新上传了数据。
回显数据的方法如下：

//请求详情回显
		getBasicData(){
			if(this.isAdd=="false"){
			//这里的参数是跳转到这个页面时传回的参数，详见upload()
				this.$http.get('/api?id='+this.id+'&relationShip='+this.relationship).then(res=>{
					if(res.code ==200){
						let data = res.data
						//把接口里的tag给allergy赋值，用来回显接口里的值
						this.allergy = JSON.parse(data.allergy)
						//data.allergy是json字符串，做一下转换，方便取数据，看情况而定
						let content2 = JSON.parse(data.allergy).content
						let allArr2 = this.allergyList
						allArr2.forEach(item=>{
							content2.forEach(item1=>{
								if(item1.id === item.id){
								//双层循环判断是否存在被选中，存在就改变plain的值
									item.plain = false
								}
							})
						})
					}
				})
			}
		},

在回显和提交数据里，可以明显的发现，this.allergy可能等价于this.form.patient.allergy，然后我忘了我当时为什么要定义这么多变量，因为涉及到的绑定值得地方很多，修改起来很麻烦，便这样保留了。

如果有大佬看到我的文章，觉得有地方可以优化，请私信我，想请教一下更简单的写法！