vue+ElementUI el-table表格新增一行或删除一行编辑组件（输入框，选择框，复选框）

此功能已集成在el-table二次封装组件中——地址

一、最终效果

二、组件功能点（只支持整行编辑）

1、数据化结构（减少html代码）
2、可编辑整行单元格（同时满足不同编辑形式——input、select、checkbox、date等）
3、可删除整行

三、参数配置

1、代码示例

<t-edit-table :table="table" :listTypeInfo="listTypeInfo" @add="add" @save="save" />

2、参数配置

1、Attributes

参数	说明	类型	是否必须
table	表格数据对象	Object	是
—data	展示数据源	Array	是
—btn	表格头部左侧插槽	slot	否
—footer	底部操作区（默认展示“保存”按钮；使用插槽则隐藏）footer="null"时隐藏底部操作	slot	否
—operator	表格内操作栏数据	Array	否
—operatorConfig	表格内操作栏样式	Object	否
—firstColumn	表格首列(序号 index,复选框 selection）排列	Object	否
—columns	表头信息	Array	是
----configEdit	表格编辑配置	Object	是
----------label	placeholder 显示	String	是
----------editComponent	组件名称可直接指定全局注册的组件，也可引入’element/abtd’如：‘a-button/el-button’	String	否
----------bind	第三方 UI 的 Attributes，如 el-input 中的 disabled禁用	Object	否
----------event	触发 handleEvent 事件的标志	String	否
----------type	下拉或者复选框显示（select-arr/select-obj/checkbox）	String	否
----------list	下拉选择数据源名称	String	否
----------arrLabel	type:select-arr 时对应显示的中文字段	String	否
----------arrKey	type:select-arr 时对应显示的数字字段	String	否
listTypeInfo	下拉选择数据源	Object	否

2. events

事件名	说明	返回值
add	新增按钮	-
save	保存按钮	最终所有输入项
handleEvent	单个输入触发事件	configEdit 中的 event 值和对应输入的 value 值

四、组件demo地址

gitHub组件地址

gitee码云组件地址

七、相关文章

基于ElementUi再次封装基础组件文档

---

vue+element-ui的table组件二次封装