Vue Elementui 表單必填項和非必填項label文字對齊的簡單方式
阿新 • • 發佈:2020-07-22
1. 不好的方式 很長時間以來都是用改寫form-item樣式來使得必填項和非必填項保證label對齊,這樣需要改寫系統樣式,還要在相應的item上引用,程式碼量增多,示例如下(不推薦)
<template> <el-form-item prop="name" label="名稱" class="form-item-require-lable"/> </template> <style lang="scss"> .form-item-require-lable { .el-form-item__label:before { content: "*"; color: #f56c6c; margin-right: 5px; font-weight: bold; } } .form-item-normal-lable { .el-form-item__label:before { content: ""; margin-right: 12px; font-weight: bold; } } </style>
2. 好的方式 利用 slot輕鬆搞定,可以在slot所在的div裡設定樣式.
<template> <el-form-item prop="name"> <div slot="label" style="margin-left:10px;">名稱</div> <el-input v-model="form.name" placeholder="請輸入名稱"></el-input> </el-form-item> </template>