Vue3中el-checkbox根据值进行选中并展示文本框

• 【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
• 【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

一、问题描述

• element中的el-checkbox标签根据传过来的值进行勾选，并展示勾选后显示的相关内容
• 需求是勾选后展示一些文本框和内容

二、代码

• 标签内容(后台传进来值存在formdate中通过点击事件赋值)

 <VpCol :span=2>
		<el-form-item prop="jdbs"> 
			<el-checkbox v-model="check1"  :checked="check1.value"  @change="check()">
			</el-checkbox> 
		</el-form-item>
</VpCol> 

三、script 标签中

<script lang="ts">
	import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
	import VpCol from '/@/components/VpCol/index.vue';
	import TableAction from '/@/components/TableAction/index.vue';
	import {InfoFilled} from '@element-plus/icons-vue'
	import request from "/@/utils/request";
	import {ElMessageBox} from 'element-plus';
	import {useI18n} from 'vue-i18n';
	import validateUtils from "/@/utils/validateUtils";
	import RcList from '/@/components/rcList/index.vue';
	
let check1=ref(false);
//这边我根据传来的值为1则勾选
const handleNodeClick = (data: Tree) => {
				state.formData.jdbs = data.jdbs
				if(state.formData.jdbs ==='1'){
                    check1.value = true;
				}else{
                    check1.value = false;
                }
			};
//这边我根据是否勾选改变传进来的值
const check =() =>{
             if(check1.value==false){
                 state.formData.jdbs ='0';
             }else{
                 state.formData.jdbs ='1';
             }
         }

创作不易，点个赞就是对我最大的支持~

---

wxgzh：程序员温眉

CSDN：程序员温眉

每天进步一点点的程序员