el-table中使用el-input

在el-table中使用el-input进行编辑时，可以根据需要添加错误提示信息。可以通过以下解决方案来实现：

1. 首先，为el-table的每列添加el-input组件。可以使用v-model指令绑定每列的值。

2. 对于需要错误提示的列，在el-input上添加一个错误提示的元素，比如一个图标或文字。

3. 在el-input的值改变时，可以使用@input事件监听输入。可以在这个事件处理函数中进行验证逻辑。

4. 在验证逻辑中，可以使用正则表达式来验证输入的内容是否符合要求。如果不符合要求，可以设置错误提示的内容，然后显示错误提示。

参考代码如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="名称">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @input="validateInput(scope.row)"></el-input>
      <span v-if="scope.row.showErr" class="error-message">{{ scope.row.errMsg }}</span>
    </template>
  </el-table-column>
  <!-- 其他列的定义 -->
</el-table>

methods: {
  validateInput(row) {
    if (!row.name) {
      row.errMsg = '请输入名称';
      row.showErr = true;
    } else {
      row.errMsg = '';
      row.showErr = false;
    }
  }
}

这样，在el-table中使用el-input进行编辑时，可以实现错误提示的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [el-table表格修改每列使用el-input对其做错误提示](https://blog.csdn.net/migexiaoliang/article/details/126236093)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【elementui】el-table中的el-input校验](https://blog.csdn.net/bidepanm/article/details/126172141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]