要素 VUE は el-input および el-select の長さを変更します

 スタイルを設定する前は、デフォルトのスタイルが使用されます。インターフェイスは次のとおりです。

 シミュレーションコードは次のとおりです

<el-form-item label="业务部" prop="team">
    <el-input
            v-model="queryParams.team"
            placeholder="业务部"
            clearable
            @keyup.enter="handleQuery"
            style="width: 200px"
        />
</el-form-item>
<el-form-item label="业务部层级" prop="category">
    <el-select v-model="queryParams.category" filterable clearable  >
        <el-option :label="'有效'" :value="1"> 有效</el-option>
        <el-option :label="'无效'" :value="0"> 无效</el-option>
    </el-select>
</el-form-item>

 見た目を美しくするために、テキスト ボックスとドロップダウン ボックスの長さが一致するようにスタイルを変更する必要があります。

1 つ目: style 属性を追加し、インライン スタイルを使用して長さを変更します。

style="width: 200px"

 2 番目のタイプ: クラス属性を追加し、内部スタイルを採用する

 stuleタグに長さを設定します

<style lang='scss' scoped>
	.test{
		width: 200px;
	}
</style>

3 番目の方法: element-ui.scss を見つけて外部スタイルを使用する

//设置form表单输入框，下拉框长度统一
  .el-form-item {
    .el-input {
      width: 200px;
    }
    .el-select{
      width: 200px;
    }

  }