element plus的el-form-item的label为空时label-width不生效的问题

element plus的el-form-item的label为空时label-width不生效的问题

el-form-item的label为空时样式异常

使用element 中的form表单的时候经常有需要循环form-item的操作
比如这个样子

  <el-col :span="24" v-for="(item, index) in formData.projectList" :key="index">
          <el-form-item label-width="70" :label="index==0?'操作项目':''" prop="projectList">
              <el-row>
                <el-col :span="12">
                  <el-select v-model="item.projectId" placeholder="请选择项目">
                    <el-option v-for="element in options" :key="element.value" :label="element.label" :value="element.value" />
                  </el-select>
                </el-col>
                <el-col :span="5" :offset="1" style="margin-top: 2px;">
                  <el-input-number v-model="item.num" :min="1" @change="handleChange" />
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button icon="Plus" circle @click="operateAddProject()" />
                </el-col>
                <el-col :span="2" v-if="formData.projectList.length>1">
                  <el-button icon="Minus" circle @click="operateDelProject()" />
                </el-col>
              </el-row>
          </el-form-item>
        </el-col>

得到的结果是这样的

我们发现即使设置了label-with他前面也没有留出位置,看了一下html得知,在label为空的时候没有创建label的元素,所以我们要手动加一下label的元素,那就用到label的自定义插槽,比如这样

  <el-col :span="24" v-for="(item, index) in formData.projectList" :key="index">
            <el-form-item label-width="70" prop="projectList">
                <template #label>
                    <span>{{ index==0?'操作项目':'' }}</span>
                </template>
              <el-row>
                <el-col :span="12">
                  <el-select v-model="item.projectId" placeholder="请选择项目">
                    <el-option v-for="element in options" :key="element.value" :label="element.label" :value="element.value" />
                  </el-select>
                </el-col>
                <el-col :span="5" :offset="1" style="margin-top: 2px;">
                  <el-input-number v-model="item.num" :min="1" @change="handleChange" />
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button icon="Plus" circle @click="operateAddProject()" />
                </el-col>
                <el-col :span="2" v-if="formData.projectList.length>1">
                  <el-button icon="Minus" circle @click="operateDelProject()" />
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>

那就得到了我们想要的结果