在前端开发中，表格是经常会用到的一个类别的组件。而在 Vue.js 框架中，用 Element UI 表格来实现数据的展示与管理，使得开发者可以更加便捷地操作表格数据。本文将介绍如何在 Vue.js 中使用 Element UI 表格实现数据的编辑和删除功能。
Element UI 表格的基本用法
Element UI 是一款基于 Vue.js 2.0 的前端组件库，提供了一套丰富实用的组件和插件，其中包括常用的表格组件。使用 Element UI 表格可以快速实现数据的展示、分页、排序、筛选等功能。下面是一个简单的 Element UI 表格的代码示例：
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table>
其中 tableData 是一个存储数据的数组，prop 属性指定了数据对象中的属性名，label 属性指定了表格列的标题。
表格的编辑功能
在 Element UI 表格中实现表格单元格的编辑功能非常方便。我们只需要在 <el-table-column> 元素中加入 editable 属性即可。
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" :editable="true"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true"></el-table-column> <el-table-column prop="address" label="地址" :editable="true"></el-table-column> </el-table>
当我们设置 editable 属性为 true 后，在单元格上双击即可进入编辑状态。此时我们可以直接在单元格中修改数据。但是注意这里的数据并没有提交到服务器，只是保存在本地。
如果要提交修改后的数据，还需要添加一个按钮来触发保存操作。比如我们可以给每个单元格添加一个 change 事件，当数据发生变化时，将数据保存到本地中。
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" :editable="true"
@change="handleChange"></el-table-column>
<el-table-column prop="age" label="年龄" :editable="true"
@change="handleChange"></el-table-column>
<el-table-column prop="address" label="地址" :editable="true"
@change="handleChange"></el-table-column>
</el-table>-- -------------------- ---- -------
------ ------- -
------ -
------ -
---------- -
- ----- ----- ---- --- -------- -------- --
- ----- ----- ---- --- -------- --------- --
- ----- ----- ---- --- -------- -------- -
-
-
--
-------- -
----------------- ------- ----- -
-------------- ---------------- ----------------------
-- ----- ------ ---------
-- --------------
-
-
-上面的代码中，我们使用了 Vue.js 提供的 $set 方法来实现数据更新后的感知变化。$set 方法会自动触发视图的重新渲染，以更新表格数据。
表格的删除功能
与编辑功能类似，Element UI 表格中的删除功能也非常方便。我们只需要给表格中某一列添加一个模板列，将列标题设置为“操作”，在模板中添加一个删除按钮，即可实现删除功能。
-- -------------------- ---- -------
--------- ----------------- ------------- ------
---------------- ----------- ---------- ----------------
-----------------------------------------
---------------- ---------- ---------- ----------------
-----------------------------------------
---------------- -------------- ---------- ----------------
-----------------------------------------
---------------- -----------
--------- -------------------
---------- ------------- ------------ ------------------------------------
--
------------
-----------
------------------
-----------上面的代码中，我们使用了 template 元素来定义一个模板列。 slot-scope="scope" 表示将当前行数据绑定到 scope 变量上。 el-button 标签用于渲染一个删除按钮， @click 事件将删除按钮的点击事件绑定到一个 handleDelete() 方法上。
-- -------------------- ---- -------
------ ------- -
------ -
------ -
---------- -
- ----- ----- ---- --- -------- -------- --
- ----- ----- ---- --- -------- --------- --
- ----- ----- ---- --- -------- -------- -
-
-
--
-------- -
------------------- -
---------------------------- --
-
-
-上面的代码中，我们使用了 splice 方法来删除表格中的数据。 splice 方法会直接改变源数据，因此如果需要响应式更新视图，要注意使用 Vue.js 提供的相应式数据更新操作。
总结
在 Vue.js 框架中使用 Element UI 表格可以快速构建出强大且美观的表格组件。通过本文的介绍，你可以轻松掌握 Element UI 表格的编辑和删除功能的实现方法。当然，Element UI 表格还提供了更多的功能和方法，希望本文对你有所帮助，也欢迎大家在实际开发中进行尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bb12b968c7c53b070797f