前端枚举enum的应用(Element)封装
什么是枚举Enum
枚举 Enum
是在众多语言中都有的一种数据类型,JavaScript中还没有(TypeScript有)。用来表示一些特定类别的常量数据,如性别、学历、方向、账户状态等,项目开发中是很常用的。
Text文字(界面显示) | key编码(编码、存储使用) | 数字value值(存储使用) |
---|---|---|
男 | male/man/nan | 1 |
女 | female/woman/nv | 2 |
其他 | other | 3 |
如上表中的性别枚举结构,前端页面上显示文字男、女,代码中一般使用编码key
,后端数据库存储可能会用编码key,也可能用数字value
值。用数字存储,占用空间会更小,还能用位运算存储多个值(算是稍微高级一点的玩法了)。
前端应用场景
表格数据绑定时,需要显示性别的文字信息,而后端返回的JSON数据中可能是key/value
值。
Element 的 table
组件 支持绑定一个格式化函数formatter
来转换数据,函数定义:Function(row, column, cellValue, index)
。
表单中提供用户的性别选项,如下拉框、单选按钮组等。
Element 的下拉框<el-select>
通过v-for
来绑定生成 <el-option>
选项:
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
封装Enum数据结构
枚举数据的使用、绑定是比较常见的,针对Element UI组件进行简单封装一下,让枚举数据的使用、绑定更轻松。
- 新建一个管理枚举数据的JS文件:
enums.js
- 定义一个枚举工厂构造函数
EnumFactory
,用来封装枚举结构的基础方法,详见注释。 - 工厂方法中通过 Object.defineProperty(obj, prop, descriptor) 添加属性/方法,该方法添加的默认是不能被枚举、修改的。
- 申明项目中公共枚举数据,并导出。
- 枚举元数据结构:
- 支持
{key , text}
结构:{ male: '男', female: '女', other: '其他' }
- 也支持
{key :{text, value }}
结构:{ male: { text: '男', value: 1 }, female: { text: '女', value: 2 } }
- 支持
//枚举构造器,提供的属性:
// keys:枚举的key集合[key]
// texts:枚举的文本text集合[text]
// values:枚举的数值value集合[value]
// entries:枚举的key、text、value集合[{key,text,value}]
// tableFormater:element中表格绑定枚举数据文本的formatter函数
function EnumFactory(enumObj) {
//复制(继承)enumObj
Object.assign(this, enumObj);
// keys:枚举的key集合[key]
Object.defineProperty(this, 'keys', {
value: Object.keys(enumObj)
});
//处理texts、values、entries
let values = [], texts = [], entries = [];
const vobjs = Object.values(enumObj);
if (typeof vobjs[0] === 'string') {
texts = vobjs;
vobjs.forEach((item, index) => {
entries.push({ key: this.keys[index], text: texts[index] });
})
}
else {
vobjs.forEach((item, index) => {
texts.push(item.text);
values.push(item.value);
entries.push({ key: this.keys[index], text: item.text, value: item.value });
})
}
// texts:枚举的文本text集合[text]
Object.defineProperty(this, 'texts', { value: texts });
// values:枚举的数值value集合[value]
Object.defineProperty(this, 'values', { value: values });
// entries:枚举的key、text、value集合[{key,text,value}]
Object.defineProperty(this, 'entries', { value: entries });
// tableFormater:element中表格绑定枚举数据文本的formatter函数
Object.defineProperty(this, 'tableFormater', {
value: function (r, c, value) {
return entries.filter(v => v.key === value || v.value === value)[0]?.text || 'notfound';
}
});
//枚举定义的数据都是常量,不可修改,冻结一下
Object.freeze(this);
}
//********************** 定义项目公共枚举 ********************** */
//性别枚举:key、text模式
// const enumSex = new EnumFactory({ male: '男', female: '女', other: '其他' });
//性别枚举:key、text、value模式
const enumSex = new EnumFactory({ male: { text: '男', value: 1 }, female: { text: '女', value: 2 } });
//水平对齐
const enumAlign = new EnumFactory({ left: '左对齐', center: '居中', right: '右对齐' });
//用户状态
const enumUserStatus = new EnumFactory({ default: '正常', delete: '删除', lock: '锁定' });
//********************** export ********************** */
export { enumSex, enumAlign, enumUserStatus }
//test
console.log(enumSex.keys);
console.log(enumSex.texts);
console.log(enumSex.values);
console.log(JSON.stringify(enumSex.entries));
// ['male', 'female']
// ['男', '女']
// [1, 2]
// [{"key":"male","text":"男","value":1},{"key":"female","text":"女","value":2}]
Element中使用
表格绑定formatter
:
<el-table :data="list" :row-class-name="handleRowClass" border>
<el-table-column prop="name" width="atuo" label="姓名"></el-table-column>
<el-table-column prop="sex" width="100px" label="性别" align="center" :formatter="enumSex.tableFormater"></el-table-column>
<el-table-column prop="score" width="150px" label="分数" label-class-name="header-score" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="120px" class-name="link-btton-col">
<template slot-scope="scope">
<el-link @click="handleDelete(scope.row,$event)" type="primary" title="修改">修改</el-link>
<el-link @click="handleDelete(scope.row,$event)" type="primary" title="查看">查看</el-link>
<el-link @click="handleDelete(scope.row,$event)" type="danger" title="删除">删除</el-link>
</template>
</el-table-column>
</el-table>
表单选型组件绑定选项:
<el-form-item label="性别">
<el-select v-model="seach.sex">
<el-option v-once v-for="item in enumSex.entries" :key="item.key" :value="item.key" :label="item.text"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="seach.sex">
<el-radio-button v-for="item in enumSex.entries" :key="item.key" :label="item.key">{{item.text}}</el-radio-button>
</el-radio-group>
</el-form-item>
️版权申明:版权所有@安木夕(kanding),本文内容仅供学习,欢迎指正、交流,转载请注明出处!
原文编辑地址:https://www.yuque.com/kanding
前端枚举enum的应用(Element)封装的更多相关文章
- MySQL字段之集合(set)枚举(enum)
MySQL字段之集合(set)枚举(enum) (2008-12-23 13:51:23) 标签:it 分类:MySQL 集合 SET mysql> create table jihe(f1 ...
- 枚举 enum
typedef enum : NSUInteger { <#MyEnumValueA#>, <#MyEnumValueB#>, <#MyEnumValueC#>, ...
- 枚举enum学习小记
参考文献: [1]C++程序设计语言(特别版), 裘宗燕译, 机械工业出版社 [2]C++ Primer (3rd Ed.), S.B. Lippman and J. Lajoie, 人民邮电出版社 ...
- Java 枚举(enum) 详解7种常见的用法
Java 枚举(enum) 详解7种常见的用法 来源 https://blog.csdn.net/qq_27093465/article/details/52180865 JDK1.5引入了新的类型— ...
- Python 枚举 enum
Python 枚举 enum enum 标准模块在 3.4 版本才可以使用,3.3 以下版本需要独立安装:https://pypi.python.org/pypi/enum34#downloads,官 ...
- 【转】结构struct 联合Union和枚举Enum的细节讨论
结构struct 联合Union和枚举Enum的细节讨论 联合(Union)是一种构造数据类型,它提供了一种使不同类型数据类型成员之间共享存储空间的方法,同时可以实现不同类型数据成员之间的自动类型转换 ...
- 枚举Enum和常量0之间的恩怨
1,任何为0的常量表达式都能隐式的转换成枚举Enum. 对于这一点,在程序中没少吃苦头.特别是对于函数重载的情况,往往让人一头雾水. 看看下面的代码(摘自MSDN),你能猜到输出吗? public e ...
- C++和Java中枚举enum的用法
在C++和java中都有枚举enum这个关键字,但是它们之间又不太一样.对于C++来说,枚举是一系列命名了的整型常量,而且从枚举值转化为对应的整型值是在内部进行的.而对于Java来说,枚举更像一个类的 ...
- 【转】枚举enum学习小记
原帖: http://hi.baidu.com/yuleishou/item/caacae872190031ec216272f 表示在vs2008下实验了一下,有些东西和原帖的还是不一样的,都贴在这里 ...
随机推荐
- 用户认证(Authentication)进化之路:由Basic Auth到Oauth2再到jwt
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_98 用户认证是一个在web开发中亘古不变的话题,因为无论是什么系统,什么架构,什么平台,安全性是一个永远也绕不开的问题 在HTTP ...
- Mybatis 缓存原理
Mybatis 缓存原理 本文来自拉钩 java 高薪训练营,如果文章写的不好,看不懂可以找我要课程视频,不收费. 只愿在编程道路上,寻求志同道合的码友.v:15774135883 1 Mybatis ...
- Badusb 资料整理
Badusb常用代码整理 一.小马下载执行 适用于常见可执行文件 #include <Keyboard.h> void setup() { //初始化,这里的代码只执行一次 delay(5 ...
- 关于KeyFile的破解,含注册机源代码
程序来自于<加密与解密3>的第五章的PacMe.exe.书中并没有给出C语言实现的加密与解密代码,自己花了一些时间,把代码还原了,并且写了一个C语言的注册机. 加密原理:正如书中所说,此程 ...
- Luogu5019 铺设道路 (贪心)
水题,水得好无语 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...
- CF914G Sum the Fibonacci (快速沃尔什变换FWT + 子集卷积)
题面 题解 这是一道FWT和子集卷积的应用题. 我们先设 cnt[x] 表示 Si = x 的 i 的数量,那么 这里的Nab[x]指满足条件的 Sa|Sb=x.Sa&Sb=0 的(a,b)二 ...
- Spring5中JdbcTemplate
JdbcTemplate是什么 JdbcTemplate 类提供了很多便利的方法解决诸如把数据库数据转变成基本数据类型或对象,执行写好的或可调用的数据库操作语句,提供自定义的数据错误处理. 在spri ...
- django路由匹配、反向解析、无名有名反向解析、路由分发、名称空间
目录 django请求生命周期流程图 1.Django请求的生命周期的含义 2.Django请求的生命周期图解及流程 3.Django的请求生命周期(分布解析) 路由层 1.路由匹配 2.path转换 ...
- ansible 003 常用模块
常用模块 file 模块 管理被控端文件 回显为绿色则,未变更,符合要求 黄色则改变 红色则报错 因为默认值为file,那么文件不存在,报错 改为touch则创建 将state改为directory变 ...
- Android同屏、摄像头RTMP推送常用的数据接口设计探讨
前言 好多开发者在调用Android平台RTMP推送或轻量级RTSP服务接口时,采集到的video数据类型多样化,如420sp.I420.yv12.nv21.rgb的,还有的拿到的图像是倒置的,如果开 ...