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

---

前言

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

---

直接上代码

一、代码

<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>