element-ui表格组件el-table实现行编辑与新增功能

最新推荐文章于 2026-07-09 16:05:39 发布

原创最新推荐文章于 2026-07-09 16:05:39 发布 · 2.4w 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

element-ui

本文介绍如何在Element UI的Table组件中实现行编辑功能，通过将单元格替换为Input组件并控制其禁用状态，结合编辑、保存和取消按钮，实现了灵活的行级编辑操作。

element前端ui组件挺美观的，我们也使用了他们的table组件，但是默认没有提供行编辑功能，我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充，不可编辑；我们可以在template里面包裹一个input框来实现单元格可编辑；等每一个单元格都可编辑的时候，我们可以在每一行后面加一个按钮来控制只可编辑当前行。

先来看一下原始不可编辑的写法：

<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column label="电话" width="260px" align="center">
<template slot-scope="scope">
{{ scope.row.tel }}
</template>
</el-table-column>
</el-table>

再来看一下可编辑的写法：

<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>

<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="电话" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.tel" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>
<el-table-column label="地址" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.address" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>

.................
</el-table>

注意在每一个template元素里面我都放了一个input元素，依然使用v-model绑定值，只不过加了一个disable属性来控制是否可编辑；页面初始化的时候，默认整个表格不可编辑，只有点击了某一行后面的编辑按钮以后，这一行才可以编辑。

由于在vue的精华与核心就是“数据绑定”，页面上的几乎所有属性都可以通过数据来定义，所以我这里采用将disable属性定义在每一行的disable变量里面，这样点击当前行的编辑按钮时，只会改变当前行的编辑状态。我们先来看一下上面改进后遗留的按钮代码：

<el-table-column align="center" label="操作" width="200%">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" size="mini"
icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">保存
</el-button>
<el-button v-else type="primary" size="mini"
@click="startEdit(scope.row)">编辑
</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh"
type="warning" @click="cancelEdit(scope.row)">取消
</el-button>

</template>
</el-table-column>

我在每一行后面添加了一个“编辑”按钮，当点击编辑按钮时，按钮栏变为保存和取消两个按钮；他们的状态更换变量通过edit来定义实现

// 编辑

startEdit(row) {
row.edit = !row.edit;
row.disabled = true;
},

// 保存
confirmEdit(row) {
row.edit = false;
row.originalValue = row.address;
if (row.tel == null || row.address == null) {
this.loadAppConfigs();
return;
}
let name= this.params.name;
const p = {...row, name};

// 调用更新方法
updateXXXXx(p);
this.$message({
message: '已修改!',
type: 'success'
});
row.disabled = false;
if (row.id === undefined) {
// 重新加载该页面
}
},

// 取消
cancelEdit(row) {
row.address = row.originalValue;
row.edit = false;
row.disabled = false;
this.$message({
message: '已取消修改!',
type: 'warning'
});
if (row.id === undefined) {

// 重新加载该页面
}
}

}

表格绑定数据源data本身是一个数组，新增一行即是往数组中再添加一个元素，不过如果我们想新增一行时显示在表格的第一行，那么就要用到unshift方法，另外需要在新增一行时处于可编辑状态，还要注意定义一个新行时的状态变量值，因为新增的是一个空输入框，需要我们来输入值，而不是一个默认值帮我们自动生成：

// 增加行
addRow () {
let newLine = {
tel: this.tel,
address: this.address,
edit: true, // 新增时处于可编辑状态，所以按钮是保存和取消
disabled: true // 打开编辑状态
};
this.list.unshift(newLine); // 移到第一行
},

另外为input框设置了disable属性以后，当不可编辑时处于禁用状态，此时文本字体颜色比较暗淡不清晰，看上去不美观，我们的目的是不让他编辑，但是依然需要正常显示颜色，这种情况只能通过重新定义input的样式来实现：

<style>
  input[disabled], input:disabled, input.disabled {
    color: #000000;
    -webkit-text-fill-color: #000000;
    -webkit-opacity: 1;
    opacity: 1;
    font-weight: 900;
  }
</style>

标签

#vue #element-ui #table