el-input el-col 自适应

如果你想让 el-input 和 el-col 自适应，可以使用 flex 布局。具体做法如下：

1. 给父元素（即包含 el-input 和 el-col 的元素）设置 display: flex;
2. 给 el-col 元素设置 flex: 1; 这样 el-col 就会自适应父元素的宽度；
3. 给 el-input 元素设置 width: 100%; 这样 el-input 就会自适应 el-col 的宽度。

示例代码如下：

<template>
  <div class="wrapper">
    <el-col :span="12">
      <el-input placeholder="请输入内容" v-model="inputValue" clearable></el-input>
    </el-col>
  </div>
</template>

<style>
  .wrapper {
    display: flex;
  }
  .el-col {
    flex: 1;
  }
  .el-input {
    width: 100%;
  }
</style>

注意：以上代码只是示例，具体情况可能需要根据实际需求进行调整。

相关问题

el-input 宽度

可以通过设置el-input组件的style或class属性来指定其宽度。使用style属性设置宽度的方法如下：
<el-input placeholder="请输入内容" style="width: 200px;"></el-input>

另外，在使用Layout布局时，可以利用col组件和span属性来控制el-input的宽度。例如，设置span为8时，el-input将占据布局的1/3宽度：
<el-form-item label="审批人">
<el-col :span="8">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-col>
</el-form-item>

另外，可以通过设置label-width属性来控制label的宽度，并通过设置el-input的宽度来实现宽度的自适应。

请注意，在直接设置宽度大小时，宽度将不具备响应式效果。

参考资料：
引用：https://blog.csdn.net/Xidian2850/article/details/104576398

vue element 怎样让el-form内的组件 保持在一行并且保持页面大小自适应

要让el-form内的组件保持在一行并且保持页面大小自适应，可以使用flex布局和栅格化布局。

1. 使用flex布局

在el-form标签上添加属性: :inline="true"，即可让el-form内的组件在一行显示。同时，在每个组件上添加flex属性，可以让它们按照比例自适应宽度。

示例代码如下：

<el-form :inline="true">
  <el-form-item>
    <el-input v-model="input1" flex="1"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input v-model="input2" flex="1"></el-input>
  </el-form-item>
</el-form>

2. 使用栅格化布局

在el-form内部使用el-row和el-col标签，使用栅格化布局可以让组件自适应宽度，并且在不同的屏幕尺寸下自动换行。

示例代码如下：

<el-form>
  <el-row>
    <el-col :span="12">
      <el-form-item>
        <el-input v-model="input1"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item>
        <el-input v-model="input2"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

以上两种方法都可以让el-form内的组件保持在一行并且保持页面大小自适应。根据具体需求选择不同的布局方式即可。