在前端开发中，我们经常会使用到表格来展示数据。而表格中的列是否可以编辑也是一个非常常见的需求。本文将介绍一款 npm 包 element-table-column-edit，它可以帮助我们快速实现表格列的编辑功能。
安装
在使用 element-table-column-edit 前，我们需要先进行安装。可以通过 npm 来进行安装：
--- ------- ------------------------- ------
使用
使用 element-table-column-edit 的方式非常简单。我们只需要在需要编辑的表格列中添加 el-editable-column 这个自定义组件即可。在这个自定义组件中，我们可以使用 slot 来进行渲染，同时提供一些基础的 props 来控制编辑状态等。
示例代码如下：
--------- ------------------
---------------- ----------- ---------- ------------
--------- ----------- --- ---
------------------- ---------- ------------
--------- --------- ------ -------- ---
--------- --------------- ----------------- --
-----------
---------------------
-----------
------------------
---------------- ---------- ---------- ------------
--------- ----------- --- ---
------------------- ---------- -----------
--------- --------- ------ -------- ---
---------------- --------------- ------------------ --
-----------
---------------------
-----------
------------------
-----------以上示例代码中，我们对表格中的 name 和 age 列进行了编辑操作，分别使用了 el-input 和 el-input-number 来进行输入。在 el-editable-column 组件中，我们传入了当前的行数据 row 和需要编辑的字段 prop，同时在 slot 中使用了子组件的 value 和 onChange 方法来控制输入。
配置
在 el-editable-column 组件中，我们提供了一些基础的 props 来控制编辑状态。
- value: 当前单元格的数据值
- row: 当前行的数据
- prop: 当前单元格绑定的字段名
- editable: 单元格是否可编辑，默认为 true
- placeholder: 单元格的 placeholder
- trigger: 触发编辑状态的方式，可以是 click、dblclick 或 manual，默认为 click
- validate: 在编辑结束后，对输入进行自定义校验。需要返回一个 Promise 对象。
- formatter: 输入框的格式化方法，在输入框的 value 改变时会触发
同时，我们也提供了一些事件来对编辑状态进行控制。
- @edit-start: 编辑状态开始时触发的事件
- @edit-end: 编辑状态结束时触发的事件
- @validate-fail: 校验失败时触发的事件。如果未提供 validate 方法，则不会触发该事件。
结语
通过使用 element-table-column-edit，我们可以轻松实现表格列的编辑功能。同时，我们也可以通过自定义 props 和事件来进行更加细致的控制。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005707e81e8991b448e7e88