【VUE实战问题记录】如何设置 vue 中 el-table 表格的高度

1. 问题说明

由于是对vue的初学者，昨天在项目中遇到的了一个问题，就是el-form中嵌套使用el-table表格，并且在表格中el-table-item中使用el-input输入框；

输入框一般都会使用校验规则，此处也是使用了校验规则，只能输入自然数及保留两位小数点，但是当校验规则起作用的时候；

如下图：

最右侧出现了一个横线；
粘贴一下此处实现上面表的布局代码：

<el-form :model="dynamicValidateForm" :rules="rules" ref="form" inline>
      <el-table
        style="width: 100%"
        :row-style="{ height: '60px' }"
        :cell-style="{ padding: '0px' }"
        class="table-class"
        :data="dynamicValidateForm.list"
      >
        <el-table-column prop="number" label="表名称" min-width="180px">
          <template slot-scope="scope">
            <el-form-item
              :prop="'list.' + scope.$index + '.number'"
              :rules="rules.number"
            >
              <el-input
                @input="(e) => exchangeInputData(e, scope.$index)"
                v-model="scope.row.number"
                style="width: 180px"
                placeholder="请输入数字"
                :disabled="isDisabled"
                class="group-inp"
              />
            </el-form-item>
          </template>
        </el-table-column>
        
        <el-table-column
          fixed="right"
          :label="名称"
          align="center"
          min-width="80px"
        >
          <template slot-scope="{ row }">
            <el-button v-else type="text" @click="open(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

2. 解决方法

上面的代码中

:row-style="{ height: '60px' }"
:cell-style="{ padding: '0px' }"

项目中对表格的高度没有特定限制，此处添加了以上两行代码属性，提前包住要提示的文字高度，这样就不会出现横线的问题；

3. 建议或者有更好的解决方法，期待大佬留言！

首次遇到，在此处纪录下，其中的一个解决方法，期待有大佬留言，还能有其他的方法；