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

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

前言

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

一、问题描述

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

二、代码

  • 标签内容(后台传进来值存在formdate中通过点击事件赋值)
 <VpCol :span=2>
		<el-form-item prop="jdbs"> 
			<el-checkbox v-model="check1"  :checked=""  @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/';
	import TableAction from '/@/components/TableAction/';
	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/';
	
let check1=ref(false);
//这边我根据传来的值为1则勾选
const handleNodeClick = (data: Tree) => {
				 = 
				if( ==='1'){
                     = true;
				}else{
                     = false;
                }
			};
//这边我根据是否勾选改变传进来的值
const check =() =>{
             if(==false){
                  ='0';
             }else{
                  ='1';
             }
         }

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


wxgzh:程序员温眉

****:程序员温眉

每天进步一点点的程序员