如何更改el-select的宽度

第一种:使用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;
    }
}

页面效果