一．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();
},
}
})
