elementui 实现选中一行编辑

最新推荐文章于 2024-03-18 17:53:18 发布

low sapkj

最新推荐文章于 2024-03-18 17:53:18 发布

阅读量1.2k

点赞数

文章标签： elementui vue.js javascript 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_35749786/article/details/129514277

版权

可以使用 Element UI 的 el-table 组件来实现选中一行编辑的功能。

首先，在表格的每一行中添加一个可编辑的单元格或者按钮，用来触发编辑功能。

然后，在点击可编辑的单元格或按钮时，设置一个状态变量 editingRow 为当前行的数据，并且在表格的每一行中使用 v-if 指令来判断当前行是否处于编辑状态。

如果当前行处于编辑状态，则显示可编辑的输入框或下拉框；如果当前行不处于编辑状态，则显示普通的文本。

最后，在点击保存按钮时，将 editingRow 设置为 null，表示当前行已经退出编辑状态。

下面是一个示例代码：

<template>
  <el-table :data="tableData" v-if="!editingRow">
    <el-table-column prop="name" label="名称" />
    <el-table-

关注