当前位置：首页 > article >正文

【前端】 el-form-item的label由于字数多自行换行调整

article 2025/3/26 20:03:13

问题：

两个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>

标签完整显示在一行