需求背景
因公司的发展需要,需要自已研发一套erp系统,供公司内部人员使用,在其中涉及到大量的可编辑表格,而Element的表格相对来说比较简单,有些复杂的功能不满足,因此自己基于Element-plus进行了二次封装,在这基础上添加所需要的功能,达到公司的需求。
使用技术
- element-plus 的 table
- vue3
使用方法
<edit-table
:mode="radio" // 代表方向 top bottom hide
:columns="column" // 传入的表头
:data="list" // 数据
@add="add" // 新增加一行会触发
ref="table" //重置方法 table.value.reset()
:editableKeys="editableKeys" // 控制是否可编辑
@onChange="onChange" // 数据改变的时候
@del="deleteAction" // 删除触发
/>
主要内容
- 可编辑单元格、支持输入框input、支持时间、支持下拉选择框
- 数据化结构,可以满足自定义下拉框,自定义数据结构格式
- 自定义显示单元格内容
- 保存、删除、编辑、取消
- 新增加一行 、提交数据
思路
- 用columns来代替 el-table-column 进行循环
- 给每个item 添加edit 代表是否需要编辑
- editableKeys 初始化传入keys 默认需要编辑的行
- 点击保存、取消来控制edit的展示
完整代码实现
<template>
<div class="m-edit-table">
<div style="margin-top: 15px;margin-bottom: 15px" v-if="mode!=='hide'&&mode!=='bottom'">
<el-button style="width: 100%" @click="add">
<el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button>
</div>
<el-table :data="transData" style="width: 100%" row-key="id" border>
<template v-for="item in columns" >
<el-table-column v-if="item.type" :type="item.type" :width="item.width" :align="item.align&#