一．vue 的(de)優勢
1. 簡潔易學：Vue采用(yòng)了(le)簡潔的(de)模闆語法，易于理(lǐ)解和(hé)學習(xí)，使開發者能夠快(kuài)速上手。
2. 響應式：Vue使用(yòng)了(le)雙向綁定機制，能夠自動追蹤數據的(de)變化(huà)并實時(shí)更新視圖，提高(gāo)了(le)開發效率。
3. 組件化(huà)開發：Vue采用(yòng)了(le)組件化(huà)的(de)思想，将頁面抽象爲獨立的(de)組件，可(kě)以複用(yòng)和(hé)組合，提高(gāo)了(le)代碼的(de)可(kě)維護性和(hé)可(kě)重用(yòng)性。
4. 虛拟DOM：Vue采用(yòng)了(le)虛拟DOM的(de)機制，在數據發生變化(huà)時(shí)，隻重新渲染發生變化(huà)的(de)部分(fēn)，減少了(le)DOM操作，提高(gāo)了(le)性能。
5. 生态豐富：Vue擁有一個(gè)活躍的(de)社區(qū)，有很多(duō)開源的(de)插件和(hé)工具可(kě)供選擇，且與其他(tā)前端庫和(hé)框架（如React和(hé)Angular）的(de)兼容性較好。
6. 漸進式框架：Vue是一個(gè)漸進式框架，可(kě)以根據項目需要逐步引入，不強制使用(yòng)整個(gè)框架，更加靈活。
7. 官方支持：Vue由一個(gè)專門的(de)團隊進行維護和(hé)更新，有完善的(de)官方文檔和(hé)社區(qū)支持，能夠提供及時(shí)的(de)技術支持和(hé)解決方案。
8. 性能優化(huà)：Vue提供了(le)很多(duō)性能優化(huà)的(de)手段，如異步組件、懶加載、代碼拆分(fēn)等，能夠提高(gāo)應用(yòng)的(de)加載速度和(hé)運行效率。
9. 可(kě)測試性：Vue提供了(le)便于測試的(de)工具和(hé)方法，使開發者能夠編寫高(gāo)質量、可(kě)靠的(de)測試用(yòng)例。
10. 适用(yòng)于移動端開發：Vue提供了(le)Vue.js的(de)移動端解決方案Vue Native，能夠快(kuài)速開發高(gāo)性能的(de)移動應用(yòng)程序。
二、element 優勢
1. 設計美(měi)觀：Element UI是一個(gè)基于Vue.js的(de)UI庫，提供了(le)一套美(měi)觀、簡潔的(de)UI組件，能夠讓開發者快(kuài)速構建出現代化(huà)的(de)網頁界面。
2. 組件豐富：Element UI提供了(le)豐富的(de)組件，包括按鈕、表格、彈窗(chuāng)、表單等常用(yòng)組件，覆蓋了(le)大(dà)部分(fēn)開發需求，可(kě)以極大(dà)地提高(gāo)開發效率。
3. 響應式布局：Element UI的(de)組件都是響應式的(de)，能夠自動适應不同屏幕大(dà)小和(hé)設備類型，使得(de)網頁在不同平台上具有良好的(de)兼容性和(hé)展示效果。
4. 可(kě)定制性強：Element UI提供了(le)豐富的(de)主題和(hé)樣式定制選項，開發者可(kě)以根據自己的(de)需求來(lái)自定義組件的(de)外觀和(hé)風格。
5. 文檔和(hé)示例豐富：Element UI有詳盡的(de)官方文檔和(hé)示例，對(duì)每個(gè)組件進行了(le)詳細的(de)介紹和(hé)使用(yòng)說明(míng)，方便開發者快(kuài)速上手和(hé)解決問題。
6. 社區(qū)活躍：Element UI擁有龐大(dà)的(de)開發者社區(qū)，可(kě)以獲取到各種問題的(de)解答(dá)和(hé)開發經驗分(fēn)享，能夠快(kuài)速解決開發過程中的(de)困難和(hé)疑惑。
7. 與Vue配套：Element UI是專門爲Vue.js開發的(de)UI庫，與Vue完美(měi)配合，能夠充分(fēn)發揮Vue的(de)優勢，提供更加優雅和(hé)高(gāo)效的(de)開發體驗。
8. 國際化(huà)支持：Element UI支持多(duō)種語言，包括中文、英文等，能夠方便地滿足國際化(huà)項目的(de)需求。
9. 優秀的(de)性能：Element UI經過優化(huà)和(hé)壓縮，具有較高(gāo)的(de)運行效率和(hé)加載速度，能夠提供流暢的(de)用(yòng)戶體驗。
10. 持續更新和(hé)維護：Element UI由一個(gè)專門的(de)團隊進行維護和(hé)更新，保持了(le)較快(kuài)的(de)更新速度和(hé)良好的(de)兼容性，能夠及時(shí)解決Bug和(hé)提供新功能。
三、html代碼
ref="refForm">
:value="item.value">
:value="item.value">
placeholder="感興趣産品（生命科學實驗室設備）">
placeholder="特别要求 ">
提交
在 el-form-item 添加 :rules="[{ required: true, message: '請輸入你的(de)要求', trigger: 'blur' }]
驗證規則
四、js代碼
new Vue({
el: '#app',
data() {
return {
// 用(yòng)戶類型
usertype: [
{ value: '最終用(yòng)戶', label: '最終用(yòng)戶' },
{ value: '分(fēn)銷商', label: '分(fēn)銷商' },
{ value: '經銷商', label: '經銷商' },
],
// 國家
city: city_arr,
ruleForm: {
type:'申請報價',
},
rules:{},
isSubmitting: false,
// 産品一
product: [
{
value: '生命科學實驗室設備',
label: '生命科學實驗室設備',
children: [
{ value: '生物(wù)安全櫃', label: "生物(wù)安全櫃" },
{ value: '超淨工作台', label: "超淨工作台" },
{ value: '二氧化(huà)碳培養箱', label: "二氧化(huà)碳培養箱" },
{ value: '超低溫冰箱', label: "超低溫冰箱" },
{ value: '離心機', label: "離心機" },
{ value: '搖床', label: "搖床" },
{ value: "PCR基因擴增儀" , label: "PCR基因擴增儀" },
{ value: "實驗室培養箱", label: "實驗室培養箱" },
{ value:"實驗室烘箱", label: "實驗室烘箱" },
{ value: "低溫培養箱" , label: "低溫培養箱" },
{ value: "實驗室通(tōng)風櫥", label: "實驗室通(tōng)風櫥" },
{ value: "無管道通(tōng)風櫥", label: "無管道通(tōng)風櫥" },
]
},
{
value:'醫療/IVF專用(yòng)設備',
label: '醫療/IVF專用(yòng)設備',
children: [
{ value: "胚胎差時(shí)監視優育系統", label: "胚胎差時(shí)監視優育系統" },
{ value:"IVF專用(yòng)多(duō)腔室培養箱", label: "IVF專用(yòng)多(duō)腔室培養箱" },
{ value:"多(duō)區(qū)溫控IVF工作站", label: "多(duō)區(qū)溫控IVF工作站" },
{ value:"二氧化(huà)碳培養箱", label: "二氧化(huà)碳培養箱" },
{ value: "抗震動實驗台", label: "抗震動實驗台" },
{ value: "CO2/O2//溫度驗證設備", label: "CO2/O2//溫度驗證設備" },
]
},
{
value: '制藥專用(yòng)設備',
label: '制藥專用(yòng)設備',
children: [
{ value: "無菌檢測隔離器", label: "無菌檢測隔離器" },
{ value: "潔淨層流稱量室", label: "潔淨層流稱量室" },
{ value:"粉末樣品稱量櫃", label: "粉末樣品稱量櫃" },
{ value: "軟簾式潔淨棚" , label: "軟簾式潔淨棚" },
{ value: "風淋室", label: "風淋室" },
{ value:"傳遞窗(chuāng)", label: "傳遞窗(chuāng)" },
{ 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();
},
}
})
