通过多选按钮选择需要修改什么字段

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

想要更新什么字段就将该字段更新，第一想到通过多选框控制，通过一系列的尝试，做了如下的布局和功能

直接上代码

一、代码

<template>
	<div>
		<el-checkbox-group v-model="updateFieldsList">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<div class="updateItem">
					<el-checkbox label="achievement">成绩:</el-checkbox>
					<el-form-item prop="achievement">
						<el-input v-model="form.achievement" placeholder="请输入成绩" clearable
							:disabled="!updateFieldsList.includes('achievement')" />
					</el-form-item>
				</div>
				<div class="updateItem">
					<el-checkbox label="grade">年级:</el-checkbox>
					<el-form-item prop="grade">
						<el-select v-model="form.grade" placeholder="请选择年级" clearable
							:disabled="!updateFieldsList.includes('grade')">
							<el-option v-for="item in gradeList" :key="item.key" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form>
		</el-checkbox-group>
	</div>
</template>

<script>
export default {
	name: 'update',
	data () {
		return {
			// 表单数据
			form: {},
			// 记录要更新的字段
			updateFieldsList: [],
			rules: {},
			gradeList:[
				{
				key: 1,
				label: '一年级',
				value: '1'
				},
				{
				key: 2,
				label: '二年级',
				value: '2'
				}
			]
		}
	},
	watch: {
		updateFieldsList: {
			handler (newVal, oldVal) {
				// 循环遍历新数组中的每一个值
				newVal.map(item => {
					// 判断新数组中是否有该值，但旧数组中没有
					if (newVal.includes(item) && !oldVal.includes(item)) {
						// 将该字段添加到form表单中
						this.$set(this.form, item, '')
					}
				})
				// 循环遍历旧数组中的每一个值
				oldVal.map(item => {
					// 判断旧数组中是否有该值，但新数组中没有
					if (!newVal.includes(item) && oldVal.includes(item)) {
						// 将该字段从form表单中移除
						this.$delete(this.form, item)
					}
				})
			},
			deep: true,
			// immediate: true
		},
	},
	methods: {
	}
}
</script>