问题:

两个el-col span均为12,中间还有很大空格,

但是前面的label就是换行,不论如何调整span比例都没用

<el-row  style="display: flex; justify-content: center; ">
          <el-col :span="12" >
            <el-form-item label="签约安排时间" prop="signingScheduleTime" >
              <el-date-picker clearable
                              v-model="form.signingScheduleTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择时间"
                             >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="签约状态">
              <el-select
                v-model="form.signingStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

如上图,标签换行了

解决方法:

加入 label-width="auto"即可

代码如下:

        <el-row  style="display: flex; justify-content: center; ">
          <el-col :span="12" >
            <el-form-item label="签约安排时间" prop="signingScheduleTime" label-width="auto" style="margin-left: 20px">
              <el-date-picker clearable
                              v-model="form.signingScheduleTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择时间"
                             >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="签约状态" label-width="auto">
              <el-select
                v-model="form.signingStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

标签完整显示在一行

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐