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

一、最终效果二、组件功能点（只支持整行编辑）1、数据化结构（减少html代码）2、可编辑整行单元格（同时满足不同编辑形式——input、select、checkbox、date等）3、可删除整行三、参数配置1、代码示例<t-edit-table :table="table" :listTypeInfo="listTypeInfo" @add="add" @save="save" />2

wocwin

4027人浏览 · 2022-01-13 15:25:10

wocwin · 2022-01-13 15:25:10 发布

此功能已集成在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组件二次封装

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^