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

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

文章目录


前言

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


直接上代码

一、代码

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

相关推荐

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

    2024-04-01 20:20:05       6 阅读
  2. 月份选择,数组去重

    2024-04-01 20:20:05       8 阅读
  3. el-tree实现、反、指定选择

    2024-04-01 20:20:05       19 阅读

最近更新

  1. 单链表接口函数的实现(增删查改)

    2024-04-01 20:20:05       0 阅读
  2. 刀片式服务器的作用有哪些?

    2024-04-01 20:20:05       0 阅读
  3. ES6

    2024-04-01 20:20:05       0 阅读
  4. 安装包逆向(总结)

    2024-04-01 20:20:05       0 阅读
  5. jsonfield注解不生效

    2024-04-01 20:20:05       0 阅读
  6. Opencv | 图像几何变换

    2024-04-01 20:20:05       0 阅读

热门阅读

  1. Qt:常见的exec()函数

    2024-04-01 20:20:05       6 阅读
  2. React组件异常捕获的解决思路

    2024-04-01 20:20:05       6 阅读
  3. HTML元信息

    2024-04-01 20:20:05       6 阅读
  4. 配置一个nginx的server, 提供获取ip的服务

    2024-04-01 20:20:05       4 阅读
  5. 标题:AI大模型学习:解放智能的未来之路

    2024-04-01 20:20:05       5 阅读
  6. 深入探秘Python生成器:揭开神秘的面纱

    2024-04-01 20:20:05       7 阅读
  7. 计算机网络目录

    2024-04-01 20:20:05       5 阅读