Vue.js组件(5):表单回显

server/2024/11/28 0:49:07/

1 文本框回显

        此组件是简单的,只需要使用v-model绑定props的值即可:

1.1 父组件

// 子组件标签与传入的数据
<project-statistics :form="project"></project-statistics>const project = ref({id : 1,name : '测试项目',
})

1.2 子组件

        定义props接收父组件传递的参数,并使用v-model与表单进行绑定。

<template><div><el-form :model="form" label-width="80px"><el-form-item label="项目ID"><el-input v-model="form.id" disabled></el-input></el-form-item><el-form-item label="项目名称"><el-input v-model="form.name"></el-input></el-form-item></el-form></div>回显的数据:{{ form.name }}
</template><script setup>
defineProps({form: {id: Number,name: String,}
})
</script>

1.3 测试

        数据可以回显到表单中并且可以根据表单的内容进行变动。 

2 单选按钮回显

        也相对简单,只需要绑定对应的value即可。

2.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({id : 1,name : '测试项目',status: 1,
})

2.2 子组件

        页面显示的内容为label属性的值,value为绑定的值。

<template><div><el-form :model="form" label-width="80px"><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio label="启用" :value="1"></el-radio><el-radio label="禁用" :value="0"></el-radio></el-radio-group></el-form-item></el-form></div>回显的数据:{{ form.status }}
</template><script setup>
defineProps({form: {status: Number}
})
</script>

2.3 测试

3 多选框回显

        因为是多选注意传入的参数为数组类型。

3.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({label: [1, 3, 4]
})

3.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="标签"><el-checkbox-group v-model="form.label"><el-checkbox-button label="标签1" :value="1"></el-checkbox-button><el-checkbox-button label="标签2" :value="2"></el-checkbox-button><el-checkbox-button label="标签3" :value="3"></el-checkbox-button><el-checkbox-button label="标签4" :value="4"></el-checkbox-button><el-checkbox-button label="标签5" :value="5"></el-checkbox-button></el-checkbox-group></el-form-item></el-form></div>回显的数据:{{ form.label }}
</template><script setup>
defineProps({form: {label: Array}
})
</script>

3.3 测试

4 选择器回显

4.1 单选

        比较简单,传入一个值即可。

4.1.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({audit: 3
})

4.1.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="审核状态"><el-select v-model="form.audit" placeholder="请选择"><el-option label="待审核" :value="1"></el-option><el-option label="审核通过" :value="2"></el-option><el-option label="审核不通过" :value="3"></el-option><el-option label="已删除" :value="4"></el-option></el-select></el-form-item></el-form></div>回显的数据:{{ form.audit }}
</template><script setup>
defineProps({form: {audit: Number}
})
</script>

4.1.3 测试

4.2 多选

4.2.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({label: [2,3,5]
})

4.2.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="标签"><el-select v-model="form.label" placeholder="请选择" multiple><el-option label="标签1" :value="1"></el-option><el-option label="标签2" :value="2"></el-option><el-option label="标签3" :value="3"></el-option><el-option label="标签4" :value="4"></el-option><el-option label="标签5" :value="5"></el-option></el-select></el-form-item></el-form></div>回显的数据:{{ form.label }}
</template><script setup>
defineProps({form: {label: Array}
})
</script>

4.2.3 测试

4.3 级联

        传入的参数为数组结构,对应级联的value值。

4.3.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({area: [1,101,10101]
})

4.3.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="标签"><el-cascaderv-model="form.area":options="areaList":props="areaProps"/></el-form-item></el-form></div>回显的数据:{{ form.area }}
</template><script setup>
import {ref} from "vue";defineProps({form: {area: Array}
})// 级联数据
const areaList = ref([{name: '北京市',code: 1,children: [{name: '北京市',code: 101,children: [{name: '丰台区',code: 10101,children: []}]}]
},{name: '天津市',code: 2,children: [{name: '天津市',code: 201,children: [{name: '虹桥区',code: 20101,children: []}]}]}
])// 属性映射
const areaProps = ref({value: 'code',label: 'name',children: 'children'
});
</script>

4.3.3 测试

5 日期时间

5.1 日期

5.1.1 父组件

<project-statistics :form="project"></project-statistics>const project = ref({date: '2024-01-01',
})

5.1.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="日期"><el-date-pickerv-model="form.date"type="date"placeholder="Pick a day":size="'default'"value-format="YYYY-MM-DD"/></el-form-item></el-form></div>回显的数据:{{ form.date }}
</template><script setup>defineProps({form: {date: String}
})

5.1.3 测试

5.2 日期时间

5.2.1 父组件

        传入规范格式的日期时间即可回显。

<project-statistics :form="project"></project-statistics>const project = ref({date: '2024-01-01T12:00:00',
})

5.2.2 子组件

<template><div><el-form :model="form" label-width="80px"><el-form-item label="日期"><el-date-pickerv-model="form.date"type="datetime"placeholder="Pick a day":size="'default'"value-format="YYYY-MM-DDTHH:mm:ss"/></el-form-item></el-form></div>回显的数据:{{ form.date }}
</template><script setup>
defineProps({form: {date: String}
})
</script>

5.2.3 测试


http://www.ppmy.cn/server/145483.html

相关文章

springboot+redis+lua脚本实现滑动窗口限流

1 限流 为了维护系统稳定性和防止DDoS攻击&#xff0c;需要对系统请求量进行限制。 2 滑动窗口 限流方式有&#xff1a;固定窗口&#xff0c;滑动窗口&#xff0c;令牌桶和漏斗。滑动窗口的意思是&#xff1a;维护一个长度固定的窗口&#xff0c;动态统计窗口内请求次数&…

基于Redis内核的热key统计实现方案|得物技术

一、Redis热key介绍 Redis热key问题是指单位时间内&#xff0c;某个特定key的访问量特别高&#xff0c;占用大量的CPU资源&#xff0c;影响其他请求并导致整体性能降低。而且&#xff0c;如果访问热key的命令是时间复杂度较高的命令&#xff0c;会使得CPU消耗变得更加严重&…

非标自动化项目管理如何做

非标自动化项目管理的关键在于&#xff1a;深入理解客户需求、制定详细的项目计划、有效的资源调配、严格的质量控制、持续的风险管理、高效的沟通协调、灵活应对变更、项目总结与持续改进。深入理解客户需求是项目成功的基础。通过与客户的深入沟通&#xff0c;全面了解其生产…

《进程隔离机制:C++多进程编程安全的坚固堡垒》

在当今数字化时代&#xff0c;软件系统的安全性愈发成为人们关注的焦点。尤其是在 C多进程编程领域&#xff0c;如何确保进程间的安全交互与数据保护&#xff0c;是每一位开发者都必须面对的重要课题。而进程隔离机制&#xff0c;犹如一座坚固的堡垒&#xff0c;为 C多进程编程…

【山大909算法题】2014-T1

文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse&#xff0c;该函数对链表进行逆序操作&#xff08;将链表中的结点按与原序相反的顺序连接&#xff09;&#xff0c;要求逆序操作就地进行&#xff0c;不分配…

阿里云服务器搭建网站CPU、磁盘读取BPS异常问题排查记录

异常现象 阿里云ECS服务器&#xff0c;配置是2C2G&#xff0c;在上面搭建的博客&#xff0c;最近初出现了两次CPU占用异常、磁盘读取BPS异常的问题&#xff0c;并且ssh无法登录。 第一次怀疑是受到了攻击&#xff0c;立马进行了重启、重置登录密码&#xff0c;重新登录进去以后…

React中事件处理和合成事件:理解与使用

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘

从 HTML 到 CSS&#xff1a;开启网页样式之旅&#xff08;二&#xff09;—— 深入探索 CSS 选择器的奥秘 前言一、CSS基本选择器1. 通配选择器2. 元素选择器3. 类选择器4. id选择器5.基本选择器总结 二、CSS复合选择器1. 后代选择器2. 子选择器3. 相邻兄弟选择器4.交集选择器5…