element中el-form下el-table中el-input样式问题

小胖
  • 70

问题描述

现有一个el-form表单中包含el-table表格,要求对el-table内元素进行验证,实现验证功能后发现el-table内元素左侧出现很多空白区域。
如下图所示:

clipboard.png

检查后发现是因为el-form表单的label-width属性自动为所有el-form-item的label设置宽度,el-table内验证同样使用了el-form-item所以元素左侧多出了label的宽度。
代码:

<el-form ref="form_test" :model="test" :rules="rules" label-width="100px" style="width: 100%;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="测试1" prop="test1" status-icon>
              <el-input maxlength="100" v-model.trim="test.test1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测试2" prop="testCustTaxNr" status-icon>
              <el-input maxlength="100" v-model.trim="test.test2"></el-input>
            </el-form-item>
          </el-col>
            </el-row>
        <template>
          明细
          <el-table border :data="test.detailList" class="width: 100%;">
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column label="名称" width="200">
              <template slot-scope="scope">
                <el-form-item :prop="`detailList.${scope.$index}.name`" :rules="rules_detailList.name">
                  <el-input maxlength="100" v-model="scope.row.name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="年龄" width="200">
              <template slot-scope="scope">
                <el-form-item :prop="`detailList.${scope.$index}.age`" :rules="rules_detailList.age">
                  <el-input maxlength="100" v-model="scope.row.age"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form>

本人不擅长前端,在网上找了很多方法但都没有解决问题,求一个有效解决方案。
多谢帮助!

回复
阅读 14.5k
2 个回答

给form 加class="aa"

<style scoped>
.aa >>> .el-form-item__content {
   margin-left:0px !important;
}
</style>
Eric
  • 1
新手上路,请多包涵

1.解决左边的 el-form-item 的宽度问题:可以单独为需要 label-width 宽度的 item 项指定宽度,即不要在 form 上统一设置 label-width 属性,而是分别在需要宽度的 el-form-item 上设置 label-width 属性,在 table 里面的 el-form-item 不设置宽度
2.解决input输入框不居中对齐的问题:通过页面调试得知是因为 el-form-item 默认会有 margin-bottom 属性,el-form-item 行内样式设置 style="margin-bottom:0;"

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏