最近在學習餓了麼團隊元件庫element-ui ~ 留幾句小感言吧
el-form 標籤，就是js表單的核心，包裹成元件樣式。
大致架構為
el-form
–el-form-item
–el-***
這樣的結構，內層表單元素由乙個個的el-form-item包裹住。
個人在學習開發過程中認為比較有用和必要的幾個元件屬性
–el-form標籤的 label-width 屬性：用於設定el-form-item的label欄位的寬度，el-form為全域性設定，也可以單獨在el-form-item中單獨設定每乙個。
–el-form-item的label屬性，用於給表單域命名，表明該區域是填寫什麼內容得~
–el-form 的rules 屬性，這個是重中之重，傳入乙個rules物件，該物件為表單域的填寫規則的集合。相對應的在每乙個el-form-item中有乙個prop屬性，對應相應的rules相對應的屬性描述的規則。如下：
表單部分：注意el-form的rules屬性 以及el-form-item的prop屬性
'movie' ref=
'form' size=
"samll" label-position=
'left'
:rules=
'rules'
>
`` '15'
>
'12'
>
'影片名稱' label-width=
"80px" prop=
"name"
>
"movie.name"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
'12'
>
'導演' label-width=
"80px" prop=
"director"
>
"movie.director"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
<
/el-row>
'15'
>
'12'
>
'發片國家' label-width=
"80px" prop=
"country"
>
"movie.country"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
'12'
>
'上映時間' label-width=
"80px" prop=
"showdate"
>
"movie.showdate"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
<
/el-row>
'15'
>
'12'
>
'語言' label-width=
"80px" prop=
"language"
>
"movie.language"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
'12'
>
'時長' label-width=
"80px" prop=
"duration"
>
"movie.duration"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
<
/el-row>
'編劇' label-width=
"80px" prop=
"writer"
>
"movie.writer"
>
<
/el-input>
<
/el-form-item>
'演員' label-width=
"80px" prop=
"actor"
>
"movie.actor"
>
<
/el-input>
<
/el-form-item>
'觀影鏈結' label-width=
"80px" prop=
"url"
>
"movie.url"
>
<
/el-input>
<
/el-form-item>
'電影簡介' label-width=
"80px" prop=
"summary"
>
"movie.summary" type=
'textarea'
>
<
/el-input>
<
/el-form-item>
"primary" @click=
"submitform('ruleform')"
>提交<
/el-button>
"resetform('ruleform')"
>重置<
/el-button>
<
/el-form-item>
<
/el-form>
data()
],director:
, writer:
, actor:
, type:
, country:
, showdate:
, language:
, duration:
, url:
, summary:
}}}
在vue data() 函式中宣告對應的規則，並且新增到對應prop屬性中，語法如下：
data()
elseif(
!value.
match
(ex1)
&&!value.
match
(ex2)
)else
}return]}
}}
VUE實戰之引入ElementUI
本文在完成初始化的vue專案中引入elementui，vue專案的搭建過程請在目錄中跳轉相應頁面。npm i element ui s如圖所示，則說明安裝成功 安裝ui後需要引入，引入的方式多種多樣，下面介紹一種常用的引入方式。在main.js中加入下面三行 引入element元素 import e...
Vue 之 Element ui 按需匯入
在使用 vue 開發專案中，我們一般會選擇 elment ui 因為這個庫是基於 vue 並且有很多現成的元件供我們使用。我們可以根據官方文件直接在 main.js 中引入，但是這樣在最後專案開發完成後打包體積過大，建議是按需匯入，因為有些元件我們是用不到的。yarn add babel plugi...
理解vue之element ui中的
在el table中，data tabledata 是資料集 table按照tabledata這個陣列的長度來生成多少行，按照有多少個el table column來生成多少列。label 日期 width 180 scope el icon time i margin left 10px span...