第一种:使用el-col
使用ElementUI的Layout布局中的栅格布局,利用el-row,el-col,从而限制el-select占用几个部分
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
页面效果
第二种:使用class类包裹
在修改特定el-form中的el-select框的宽度时,如果页面含有多个select框和input框,使用class类包裹,可以更改指定的宽度
<div class="a1">
<el-dialog title="服务" :visible.sync="showDialog" width="500px" @close="cancelDataFn" :close-on-click-modal='false'>
<div v-if="!add.radioStatus" class="changeH" >
<el-form-item label="方式:" prop="encryptionTypeValue" class="a2" >
<el-select v-model="add.encryptionTypeValue" placeholder="请选择方式" >
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="密码:" class="is-required changeHeight" >
<el-form-item prop="signatureKey">
<el-input v-model="add.signatureKey" placeholder="请输入密码" style="width:245px">
</el-input>
</el-form-item>
<el-button type="primary" @click.native="randomSignature" class="addWidth">随机
</el-button>
<br />
<el-checkbox v-model="add.checked">动态密码</el-checkbox>
</el-form-item>
<el-form-item label="JWTKey:" class="is-required changeHeight">
<el-form-item prop="JWTKey">
<el-input v-model="add.JWTKey" placeholder="请输入JWTKey" style="width:245px">
</el-input>
</el-form-item>
<el-button type="primary" @click.native="randomShow" class="addWidth">
随机
</el-button>
</el-form-item>
<el-form-item label="有效时间:" prop="validTime" class="a4">
<el-input v-model.number="add.validTime" placeholder="请输入token有效时间" class="validTime">
</el-input>
</el-form-item>
<el-select v-model.number="add.time" class="a3" >
<el-option label="秒" value="秒" >
</el-option>
<el-option label="分钟" value="分钟" >
</el-option>
</el-select>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="saveDataFn">确 定</el-button>
<el-button size="small" plain @click="cancelDataFn">取 消</el-button>
</div>
</el-dialog>
</div>
css代码部分
外部用一个class类包在外部,这里我取名为a1,我需要更改的是“请选择方式”和“有效时间”select框的宽度,分别用a2,a3包含,这样就可以对特定的el-form-item里面select框值进行修改了,除了自己去的类名可以修改, .form-update和 .el-input都是需要固定这样写
.a1 {
.form-update .a2 .el-input{
width: 220px;
}
.form-update .a3 .el-input {
width: 70px;
margin-left: -15px;
}
}
页面效果