一．vue 的优势
1. 简洁易学：Vue采用了简洁的模板语法，易于理解和学习，使开发者能够快速上手。
2. 响应式：Vue使用了双向绑定机制，能够自动追踪数据的变化并实时更新视图，提高了开发效率。
3. 组件化开发：Vue采用了组件化的思想，将页面抽象为独立的组件，可以复用和组合，提高了代码的可维护性和可重用性。
4. 虚拟DOM：Vue采用了虚拟DOM的机制，在数据发生变化时，只重新渲染发生变化的部分，减少了DOM操作，提高了性能。
5. 生态丰富：Vue拥有一个活跃的社区，有很多开源的插件和工具可供选择，且与其他前端库和框架（如React和Angular）的兼容性较好。
6. 渐进式框架：Vue是一个渐进式框架，可以根据项目需要逐步引入，不强制使用整个框架，更加灵活。
7. 官方支持：Vue由一个专门的团队进行维护和更新，有完善的官方文档和社区支持，能够提供及时的技术支持和解决方案。
8. 性能优化：Vue提供了很多性能优化的手段，如异步组件、懒加载、代码拆分等，能够提高应用的加载速度和运行效率。
9. 可测试性：Vue提供了便于测试的工具和方法，使开发者能够编写高质量、可靠的测试用例。
10. 适用于移动端开发：Vue提供了Vue.js的移动端解决方案Vue Native，能够快速开发高性能的移动应用程序。
二、element 优势
1. 设计美观：Element UI是一个基于Vue.js的UI库，提供了一套美观、简洁的UI组件，能够让开发者快速构建出现代化的网页界面。
2. 组件丰富：Element UI提供了丰富的组件，包括按钮、表格、弹窗、表单等常用组件，覆盖了大部分开发需求，可以极大地提高开发效率。
3. 响应式布局：Element UI的组件都是响应式的，能够自动适应不同屏幕大小和设备类型，使得网页在不同平台上具有良好的兼容性和展示效果。
4. 可定制性强：Element UI提供了丰富的主题和样式定制选项，开发者可以根据自己的需求来自定义组件的外观和风格。
5. 文档和示例丰富：Element UI有详尽的官方文档和示例，对每个组件进行了详细的介绍和使用说明，方便开发者快速上手和解决问题。
6. 社区活跃：Element UI拥有庞大的开发者社区，可以获取到各种问题的解答和开发经验分享，能够快速解决开发过程中的困难和疑惑。
7. 与Vue配套：Element UI是专门为Vue.js开发的UI库，与Vue完美配合，能够充分发挥Vue的优势，提供更加优雅和高效的开发体验。
8. 国际化支持：Element UI支持多种语言，包括中文、英文等，能够方便地满足国际化项目的需求。
9. 优秀的性能：Element UI经过优化和压缩，具有较高的运行效率和加载速度，能够提供流畅的用户体验。
10. 持续更新和维护：Element UI由一个专门的团队进行维护和更新，保持了较快的更新速度和良好的兼容性，能够及时解决Bug和提供新功能。
三、html代码
ref="refForm">
:value="item.value">
:value="item.value">
placeholder="感兴趣产品（生命科学实验室设备）">
placeholder="特别要求 ">
提交
在 el-form-item 添加 :rules="[{ required: true, message: '请输入你的要求', trigger: 'blur' }]
验证规则
四、js代码
new Vue({
el: '#app',
data() {
return {
// 用户类型
usertype: [
{ value: '最终用户', label: '最终用户' },
{ value: '分销商', label: '分销商' },
{ value: '经销商', label: '经销商' },
],
// 国家
city: city_arr,
ruleForm: {
type:'申请报价',
},
rules:{},
isSubmitting: false,
// 产品一
product: [
{
value: '生命科学实验室设备',
label: '生命科学实验室设备',
children: [
{ value: '生物安全柜', label: "生物安全柜" },
{ value: '超净工作台', label: "超净工作台" },
{ value: '二氧化碳培养箱', label: "二氧化碳培养箱" },
{ value: '超低温冰箱', label: "超低温冰箱" },
{ value: '离心机', label: "离心机" },
{ value: '摇床', label: "摇床" },
{ value: "PCR基因扩增仪" , label: "PCR基因扩增仪" },
{ value: "实验室培养箱", label: "实验室培养箱" },
{ value:"实验室烘箱", label: "实验室烘箱" },
{ value: "低温培养箱" , label: "低温培养箱" },
{ value: "实验室通风橱", label: "实验室通风橱" },
{ value: "无管道通风橱", label: "无管道通风橱" },
]
},
{
value:'医疗/IVF专用设备',
label: '医疗/IVF专用设备',
children: [
{ value: "胚胎差时监视优育系统", label: "胚胎差时监视优育系统" },
{ value:"IVF专用多腔室培养箱", label: "IVF专用多腔室培养箱" },
{ value:"多区温控IVF工作站", label: "多区温控IVF工作站" },
{ value:"二氧化碳培养箱", label: "二氧化碳培养箱" },
{ value: "抗震动实验台", label: "抗震动实验台" },
{ value: "CO2/O2//温度验证设备", label: "CO2/O2//温度验证设备" },
]
},
{
value: '制药专用设备',
label: '制药专用设备',
children: [
{ value: "无菌检测隔离器", label: "无菌检测隔离器" },
{ value: "洁净层流称量室", label: "洁净层流称量室" },
{ value:"粉末样品称量柜", label: "粉末样品称量柜" },
{ value: "软帘式洁净棚" , label: "软帘式洁净棚" },
{ value: "风淋室", label: "风淋室" },
{ value:"传递窗", label: "传递窗" },
{ value:"转移舱", label: "转移舱" },
]
},
],
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm);
that=this;
that.isSubmitting = true;
$.ajax({
url:url,
type:'POST',
data:this.ruleForm,
cache: false,
success:function(res) {
that.isSubmitting = false;
if(res.code==1){
that.ruleForm={};
that.$message({
message:res.msg,
type: "success",
});
}else{
that.$message({
message:res.msg,
type: "error",
});
}
},
error: function (res) {
that.$message({
message: res.msg,
type: "error",
});
}
})
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.removeRules();
this.$refs[formName].resetFields();
},
}
})
