解决elementUI表格里嵌套输入框，检验时错误信息被遮挡

1.表格

自定义错误信息显示div

            <el-form-item label="租赁价格" prop="supplierId">
                <el-table-column prop="salePrice" label="销售价" align="center">
                  <template slot-scope="scope">
                    <el-form-item label="" :prop="`leasingCycleInfo[${scope.$index}].salePrice`"
                      :rules="rules['salePrice']">
                      <el-input v-model.trim="scope.row.salePrice" clearable placeholder="请输入销售价">
                      </el-input>
                      <div v-if="errors[scope.$index] && errors[scope.$index].salePrice" class="error-message">{{
    errors[scope.$index].salePrice }}</div>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

2.校验方法中，使用对象存储错误信息

data() {  
var validateSalePrice = (rule, value, callback) => {
      let curIdx = this.equipmentLeaseForm.leasingCycleInfo.findIndex(item => item.salePrice === value);
      console.log(curIdx);

      if (value === '') {
        if (curIdx != -1) {
          this.$set(this.errors, curIdx, { salePrice: "请输入销售价格" });
        }
        callback(new Error('请输入销售价格'));
      } else if (value < 0) {
        if (curIdx != -1) {
          this.$set(this.errors, curIdx, { salePrice: "销售价格不能小于0" });
        }
        callback(new Error('销售价格不能小于0'));
      } else {
        delete this.errors.salePrice;
        callback();
      }
    };
 return {
...
      rules: {
        salePrice: [
          { validator: validateSalePrice, trigger: "blur" }
        ]
      },
      errors: [],
}

3.定义错误信息样式

  .error-message {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }

4.处理方式二，使用el-tooltips进行提示