vue3 + element-plus 当表单遇上翻页

ui框架 element-plus

最近业务上有个功能，表单里面需要填充表格。进行自定义创建。同时需要校验。不能为空。 如下所示：

此时如果触发校验，会变成这样。

我查阅了github的issue，发现了一条issue github.com/element-plu… 说是可以用弹窗来解决

<el-dialog v-model="dialog.show" append-to-body>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
   />
</el-dialog>

我试了之后，发现错误图标依然存在。 并且这个方法 感觉不太好。因为加了个弹窗

于是 我改用css处理，强行将颜色改掉，以及将图标去掉

.el-select {
  .el-tooltip__trigger{
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;

    .el-icon {
      color: #a8abb2 !important;
    }
    .el-input__validateIcon{
      display: none !important;
    }
  }
}
.el-input {
  .el-input__wrapper{
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    .el-icon {
      color: #a8abb2 !important;
    }
    .el-input__validateIcon{
      display: none !important;
    }
  }
}

现在触发校验，效果完美。（如果你开启了scoped，记得穿透。）

顺手记录一下，万一帮到人了呢。xixi