el-table表格修改每列使用el-input对其做错误提示

最新推荐文章于 2025-02-27 15:40:06 发布

migexiaoliang

最新推荐文章于 2025-02-27 15:40:06 发布

阅读量1.8k

点赞数 1

分类专栏： element-ui 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/migexiaoliang/article/details/126236093

版权

element-ui 专栏收录该内容

24 篇文章

订阅专栏

该博客介绍了如何在基于Element-UI的表格中实现单元格的编辑功能，并添加实时错误提示。通过监听输入@blur和@focus事件，结合v-show和条件类来控制编辑状态和错误显示。当输入不符合规则时，显示错误信息并改变输入框样式。同时，提供了编辑、保存和取消编辑的操作处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

el-table表格修改每列使用el-input对其做错误提示。
有时候需要在列表里面进行直接修改，并且有错误提示信息，如下图所示：
在这里插入图片描述

解决方案：

使用v-show="!scope.row.canEdit"控制显示与隐藏，图标在element图标库去找，我用的自己公司的图标库里面的图标class="icon icon-bianji"。错误信息提示:class="scope.row.showErr ? 'input-error' : ''"，错误信息展示<span v-show="scope.row.canEdit && scope.row.errMsg" class="errmsg-style">{{ scope.row.errMsg }}</span>。监听输入@blur="listenInput(scope.row)" @focus="listenInput(scope.row)"。

 				<span
                  v-show="!scope.row.canEdit">
                  {{ scope.row.limitValue }}
                </span>
                <i
                  class="icon icon-bianji"
                  style="margin-left: 10px;"
                  v-show="!scope.row.canEdit"
                  slot="suffix"
                  @click="onEdit(scope.row)">
                </i>
                <el-input
                  slot="reference"
                  v-show="scope.row.canEdit"
                  :class="scope.row.showErr ? 'input-error' : ''"
                  size="small"
                  v-model="scope.row.limitValue"
                  @blur="listenInput(scope.row)"
                  @focus="listenInput(scope.row)"
                  style="width: 60%"
                  type="text">
                </el-input>
                <i class="icon icon-chenggong" v-show="scope.row.canEdit" style="color: #02b212; margin-left: 5px;" @click="onSave(scope.row)"></i>
                <i class="icon icon-shibai" v-show="scope.row.canEdit" style="color: #e6a23c; margin-left: 5px;" @click="cancleEdit(scope.row)"></i><br />
                <span v-show="scope.row.canEdit && scope.row.errMsg" class="errmsg-style">{{ scope.row.errMsg }}</span>

数据获取成功后，将数据添加三个字段：

// 数据获取成功
    dataLoadSuccess(res) {
      let data = JSON.parse(JSON.stringify(res.data.res));
      data.forEach(item => {
        item.canEdit = false; //是否编辑
        item.showErr = false; //是否显示错误提示
        item.errMsg = ''; //错误提示信息
      });
    },

监听输入：

// 监听输入
    listenInput(row) {
      if (!row.limitValue) {
        row.errMsg = '请输入配额数';
        row.showErr = true;
      }
      let reg = /^\d{1,10}$/;
      if (!reg.test(row.limitValue)) {
        row.errMsg = '请输入正确的配额数';
        row.showErr = true;
      } else if (
        row.limitValue < this.form.usedValue &&
        this.form.isUsedDisplay
      ) {
        row.errMsg = '总配额不可小于已用配额';
        row.showErr = true;
      } else {
        row.errMsg = '';
        row.showErr = false;
      }
    },

点击编辑：

	onEdit(row) {
      row.canEdit = true;
    },

保存按钮：

// 保存修改,有错误不可以保存
    onSave(row) {
      if (row.showErr || row.errMsg) {
        return;
      }
      .....

取消按钮：

//取消编辑
    cancleEdit(row) {
      row.canEdit = false;
      row.errMsg = '';
      row.showErr = false;
    },

错误提示样式：

.input-error /deep/ .el-input__inner {
  border: 1px solid red;
}
.errmsg-style {
  color: red;
}