请问如何把输入框宽度 弄成自适应宽度 贴着label

Question

      <el-form label-width="100px" label-position="left">
        <el-row>
          <el-col :span="4" class="pr-3">
            <el-form-item label="姓名">
              <el-input></el-input>
            </el-form-item> </el-col
          ><el-col :span="4" class="pr-3">
            <el-form-item label="性别"> <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="民族">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="年龄区间">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="身份证号">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="联系电话">
              <el-input></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="pr-3">
            <el-form-item label="街道/镇">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="社区/村">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="就业状态">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="就业区域">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="行业类别">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="返乡创业意愿">
              <el-input></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="pr-3">
            <el-form-item label="特殊人群">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="pr-3">
            <el-form-item label="职业技能证书">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button plain type="primary">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

请问如何把输入框宽度 弄成自适应宽度 贴着label

Answer 1

给el-form加个类名class="myForm",然后添加样式

.myForm::v-deep {
    .el-row {
        .el-form-item {
            display: flex;
    
            .el-form-item__label {
                width: unset;
            }
    
            .el-form-item__content {
                margin-left: unset;
                flex: 1;
            }
        }
    }
}