前言：
本人前端新手一枚，目前工作中接觸Element-UI較多，但其中很多組件布局什么的都不是很清楚。
所以想稍微花點(diǎn)時(shí)間簡(jiǎn)單過(guò)一遍Element-UI官方文檔，并作以記錄。其中有什么不對(duì)的地方，還請(qǐng)各位路過(guò)的大佬不吝賜教！
以下內(nèi)容按element-ui官方文檔結(jié)構(gòu)進(jìn)行整理
一、Basic
（一）、Layout（布局）
Layout布局主要使用el-row和el-col來(lái)實(shí)現(xiàn)，然后通過(guò)其對(duì)應(yīng)的各種屬性來(lái)設(shè)置所需的各種樣式。
el-row: 一行的內(nèi)容都放在el-row標(biāo)簽里面，在行標(biāo)簽上可以設(shè)置各種屬性，如行內(nèi)各列之間距離等
el-col: el-col是el-row的子標(biāo)簽，表示一行里面的每一列。在每一列里面又可以放置等各類標(biāo)簽
span屬性： 用在el-col標(biāo)簽里面，可以通過(guò) :span 屬性來(lái)設(shè)置每一列占多少空間——在element-ui中每一行可以等分為24列
如下代碼所示：
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
參考及引用說(shuō)明：
Element 布局組件el-row和el-col 詳解:https://blog.csdn.net/zxlyx/article/details/125895348文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-757364.html
更新情況：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-757364.html
到了這里，關(guān)于Element-UI官方文檔閱讀筆記（VUE）—持續(xù)更新中····的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
