前言
elementui 文檔中如何使表單的標(biāo)簽和輸入框分別對齊
類似于這樣的效果, 雖然 Elementui官方文檔寫的有, 但是因?yàn)槲也唤?jīng)常寫前端, 每次都會(huì)忘記, 這里記錄下
官方文檔
- https://element.eleme.cn/#/zh-CN/component/form
如上圖, 主要是通過修改label-postion對齊, 另外label-width是修改左側(cè)標(biāo)簽的寬度, 如果寬度過小的話會(huì)導(dǎo)致標(biāo)簽編程兩行
輸入框長度
修改輸入框長度主要使用的是 ::v-deep 這個(gè)指令 , 方法也很簡單
<el-form-item label="閱讀器名稱" class="input-reader-name">
<el-input v-model="addReaderForm.readerName"></el-input>
</el-form-item>
比如我這里有一個(gè)輸入框 , 然后我們給他一個(gè)class input-reader-name文章來源：http://www.zghlxwxcb.cn/news/detail-507518.html
::v-deep .input-reader-name{
width: 60%;
}
主要利用的是Vue的樣式穿透, 具體的可以百度其用法文章來源地址http://www.zghlxwxcb.cn/news/detail-507518.html
到了這里，關(guān)于Element UI 系列 - 表單標(biāo)簽和輸入框?qū)R以及修改輸入框長度的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
