Element Plus二次封装el-table、可编辑表格(element组件的二次封装注册)

Element Plus二次封装el-table、可编辑表格 一、需求

推荐整理分享Element Plus二次封装el-table、可编辑表格(element组件的二次封装注册)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:element二次开发,elementplus二次封装input,element plus二次封装,el-table二次封装,element组件的二次封装注册,element组件的二次封装注册,element plus二次封装,elementplus二次封装input,内容如对您有帮助，希望把文章链接给更多的朋友！

在后台管理项目中，可以显而易见的见到表格组件，为了方便我们会把表格组件进行二次封装，即方便了开发，也方便了维护。

2023年04月01日更新单元格编辑功能

注意事项

2023年4月25号

// LTable.vue组件中// 在修改某一行数据的时候切记删除添加的 index 字段// 否则会报这样的一个错误：caught (in promise) ER_BAD_FIELD_ERROR: Unknown column 'index' in 'field list'// 就是这里这个index导致的，在你去请求接口把这个字段删除掉就可以了，// 例子：delete form.index下面接着去请求接口就行了// 为每一行返回固定的classNamefunction tableRowClassName({ row, rowIndex }) { row.index = rowIndex;}// 为所有单元格设置一个固定的 classNamefunction tableCellClassName({ column, columnIndex }) { column.index = columnIndex;}二、组件功能1、基础表格2、表格分页3、单条数据操作4、表格中图片展示5、根据需要格式化时间6、单条数据操作 启用/禁用7、根据数据状态展示不同样式三、准备工作

在 components 下创建 LTable.vue 文件 接下来是我们的页面 分别需要一个 index.vue 和 table.ts 文件 接下来我们直接上代码

四、LTable.vue 完整代码

这里需要吧 LTable.vue 该组件全局组册 或者使用时单独引入（根据自己需求）

<template> <div class="l-table"> <!-- 表格 --> <el-table :data="props.tableModule.dataList" border height="100%" style="width: 100%; overflow-y: scroll" v-loading="props.tableModule.loading" @selection-change="props.tableModule.selectChange" :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" @cell-dblclick="cellDblClick"> <el-table-column type="selection" width="50" align="center" /> <template v-if="tableChildren == '1'"> <el-table-column v-for="(item, index) in props.tableModule.columns" :key="item.prop" :prop="item.prop" :label="item.label" :align="item.align || 'left'" :width="item.width" :min-width="item.min_width" :fixed="item.fixed"> <template slot-scope="scope" #default="scope"> <div v-if="item.type == 'switch'"> <el-switch v-model="scope.row[item.prop]" :active-value="item.activeValue" :inactive-value="item.inactiveValue" @change="props.tableModule.switchChange(scope.row)"> </el-switch> </div> <div v-else-if="item.type == 'status'"> <el-tag :type="item.color ? item.color[scope.row[item.prop]] : ''">{{ props.tableModule.fieldChange(scope.row[item.prop], item.option) }}</el-tag> </div> <div v-else-if="item.type == 'image'"> <el-image style="width: 60px; height: 60px" :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]"> </el-image> </div> <div v-else-if="item.type == 'time'">{{ formatDate(scope.row[item.prop]) }}</div> <div v-else-if="item.isEdit"> <el-input v-model="scope.row[item.prop]" :placeholder="'请输入' + item.label" @blur="inputBlur(scope.row)" autofocus ref="inputRef" v-if="scope.row['index'] == rowIndex && scope.column['index'] == columnIndex" /> <div v-else>{{ scope.row[item.prop] }}</div> </div> <div v-else>{{ scope.row[item.prop] }}</div> </template> </el-table-column> </template> <template v-else-if="tableChildren == '2'"> <el-table-column v-for="(one, index) in props.tableModule.columns" :key="index" :label="one.label"> <el-table-column v-for="item in props.tableModule.columns[index].children" :key="item.prop" :prop="item.prop" :label="item.label" :align="item.align || 'left'" :width="item.width" :min-width="item.min_width" :fixed="item.fixed"> <template slot-scope="scope" #default="scope"> <div v-if="item.type == 'switch'"> <el-switch v-model="scope.row[item.prop]" :active-value="item.activeValue" :inactive-value="item.inactiveValue" @change="props.tableModule.switchChange(scope.row)"> </el-switch> </div> <div v-else-if="item.type == 'status'"> <el-tag :type="item.color ? item.color[scope.row[item.prop]] : ''">{{ props.tableModule.fieldChange(scope.row[item.prop], item.option) }}</el-tag> </div> <div v-else-if="item.type == 'image'"> <el-image style="width: 60px; height: 60px" :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]"> </el-image> </div> <div v-else-if="item.type == 'time'">{{ formatDate(scope.row[item.prop]) }}</div> <div v-else-if="item.isEdit"> <el-input v-model="scope.row[item.prop]" :placeholder="'请输入' + item.label" @blur="inputBlur(scope.row)" autofocus ref="inputRef" v-if="scope.row['index'] == rowIndex && scope.column['index'] == columnIndex" /> <div v-else>{{ scope.row[item.prop] }}</div> </div> <div v-else>{{ scope.row[item.prop] }}</div> </template> </el-table-column> </el-table-column> </template> <slot name="event"></slot> </el-table> <div class="l-pages"> <!-- 分页 --> <el-pagination :current-page="props.tableModule.pages.page" :page-size.sync="props.tableModule.pages.limit" :page-sizes="pageSizes" :layout="layout" :total="props.tableModule.pages.total" @size-change="props.tableModule.sizeChange" @current-change="props.tableModule.currentChange" /> </div> </div></template><script setup>import { defineProps, onMounted, reactive, toRefs } from 'vue'import { formatDate } from '@/utils/index'const props = defineProps({ tableModule: Object, layout: { type: String, default: "total, sizes, prev, pager, next, jumper", }, pageSizes: { type: Array, default() { return [10, 20, 30, 50]; }, }, tableChildren: { type: String, default: '1' }})const state = reactive({ rowIndex: 0, columnIndex: 0})const { rowIndex, columnIndex } = toRefs(state)onMounted(() => { })// 编辑单元格// 为每一行返回固定的classNamefunction tableRowClassName({ row, rowIndex }) { row.index = rowIndex;}// 为所有单元格设置一个固定的 classNamefunction tableCellClassName({ column, columnIndex }) { column.index = columnIndex;}// el-table单元格双击事件function cellDblClick(row, column, cell, event) { state.rowIndex = row.index state.columnIndex = column.index}// input失去焦点function inputBlur(row) { state.rowIndex = 0 state.columnIndex = 0 props.tableModule.editInputBlur()}</script><style scoped lang="scss">.l-table { height: calc(100% - 32px); padding-bottom: 10px; .el-table { height: calc(100% - 42px) !important; } .l-pages { margin-top: 10px; }}</style>index.vue 完整代码<template> <div class="role"> <!-- :tableChildren="2" 开启二级表头 普通表格不穿 --> <LTable :tableModule="tableModule" :tableChildren="2"> <template #event> <el-table-column align="center" fixed="right" label="操作" width="120"> <template slot-scope="scope" #default="scope"> <el-button @click="userDelete(scope)">删除</el-button> </template> </el-table-column> </template> </LTable> </div></template><script setup lang="ts">import { reactive, toRefs, ref, onMounted } from 'vue'import { columnsData } from './table'import { ElMessage, ElMessageBox } from 'element-plus'const state = reactive({ columns: columnsData, selections: [], loading: false, dataList: [ { username: '张三', phone: '16688889999', createDate: 1679489616000, avatar: 'https://img1.baidu.com/it/u=2427424503,947601508&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', userStatus: 1, } ], pages: { total: 0, limit: 20, page: 1, }})const { loading, dataList, columns, pages } = toRefs(state)onMounted(() => { getDataList()})function getDataList() {}function userDelete(row: any) { console.log(row)}// 表格分页相关const tableModule = ref<Object>({ currentChange: currentChange, selectChange: selectChange, fieldChange: fieldChange, sizeChange: sizeChange, editInputBlur: editInputBlur, columns: columns, dataList: dataList, loading: loading, pages: pages})function selectChange(selection: any) { state.selections = selection}function fieldChange(row: any, option: any) { if (option[row]) { return option[row] }}function sizeChange(item: any) { state.pages.limit = item getDataList()}function currentChange(item: any) { state.pages.page = item getDataList()}function editInputBlur() { console.log('可编辑单元格失去焦点')}</script><style scoped lang="scss"></style>table.ts 完整代码talbe.ts文件介绍该文件是控制我们表格的列展示的const columnsData: any = [ { prop: 'username', // 数据字段对应 label: '姓名', // 列名称 min_width: 120,// 最小长度（这里建议每一个表格中最少有一个字段设置最小长度）设置这个就不用设置 widht 了，大家可以自己摸索 fixed: true // 固定表头（注意：二级表头时不可用） }, { prop: 'phone', label: '手机号', isEdit: true, // isEdit为 true 开启单元格编辑（可编辑的单元格由自己控制） align: 'center', // 控制列对其方式（默认左对齐） width: 150, }, { prop: 'createDate', label: ' 创建时间', align: 'center', type: 'time', // 针对字段需要时间格式化 width: 180, }, { prop: 'avatar', label: '头像', align: 'center', type: 'image', // 设置字段以图片展示 width: 80 }, { prop: 'userStatus', label: '用户状态', align: 'center', type: 'switch', // 编辑用户状态 activeValue: 1, // switch为打开时的值 inactiveValue: 2,// switch为关闭时的值 width: 100 }, { prop: 'userStatus', label: '用户状态', align: 'center', width: 100, type: 'status', // 与 type 为 switch 不同（status主要是看的而不是对数据的操作） option: { '1': '启用', '2': '禁用', }, color: { '1': 'success', '2': 'info', } },]export { columnsData}// 二级表头写法const columnsData: any = [ { label: '用户信息', // 表头名称 children: [ // 子级表头 { prop: 'username', label: '姓名', min_width: 120 } ] }, // 依次向下添加即可]export { columnsData}

这里附上一张效果图 二级表头效果图 可编辑单元格

表格增删改查请移步至 el-table表格查询封装