前端枚举enum的应用(Element)封装

更新日期: 2022-10-14阅读: 1.1k标签: 枚举

什么是枚举Enum

枚举 Enum是在众多语言中都有的一种数据类型,JavaScript中还没有(TypeScript有)。用来表示一些特定类别的常量数据,如性别、学历、方向、账户状态等,项目开发中是很常用的。

Text文字(界面显示)key编码(编码、存储使用)数字value值(存储使用)
male/man/nan1
female/woman/nv2
其他other3

如上表中的性别枚举结构,前端页面上显示文字男、女代码中一般使用编码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


链接: https://www.fly63.com/article/detial/12205

用for...in 和Object.keys()枚举对象属性的差异

用for...in循环和Object.keys方法都可以获取对象的属性,那么它们有什么区别呢?getOwnPropertyNames方法输出的结果中还包含了对象的不可枚举属性,可以通过Object.propertyIsEnumerable来判断属性是否可枚举从而对结果进行过滤

PHP实现枚举

在数学和计算机科学理论中,一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数。这两种类型经常(但不总是)重叠。

javascript枚举算法

题目:在1,2,3,4,5 五个数中,我们随机选取 3个数。问有多少种取法?并且把每种取出数的方法列举出来。乍看这道题,其实感觉没什么难度。三个for循环不就解决问题了。

TypeScript 枚举

数字类型枚举:常规枚举的值都是数字类型,因此被称为数字类型枚举;改变与数字枚举关联的数字:默认情况下,第一个枚举值是 0,后续的值会递增。

TypeScript-枚举

枚举是对JavaScript标准数据类型集的扩充,常被用来限定在一定范围内取值的场景。在TypeScript中支持数字和字符串的枚举。我们可以用enum来实现。字符串枚举中没有自增的特性,我们在初始化的时候必须给每一个成员都设字符串。

JS模拟实现枚举

在当前的javascript中,并没有枚举这个概念,在某些场景中使用枚举更能保证数据的正确性,减少数据校验过程,下面就介绍一下javascript如何模拟实现枚举效果。

TypeScript 枚举类型用法示例

使用枚举类型可以允许我们定义一些带名字的常量,也可以清晰地表达意图或创建一组有区别的用例。在 TypeScript 中,支持数字的和基于字符串的枚举。

TypeScript 枚举指南

枚举是受 TypeScript 支持的数据类型。枚举允许您定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。枚举大多数用于面向对象的编程语言(如 Java 和 C#)中

TS支持数字枚举和基于字符串的枚举

枚举的好处是,我们可以定义一些带名字的常量,而且可以清晰地表达意图或创建一组有区别的用例,TS支持数字的和基于字符串的枚举,首先来看数字枚举

用 JavaScript 编写枚举的最有效方法

假设有这样一个场景,我们需要统计员工的技术栈,目前我们需要标记的技术有 CSS、JavaScript、HTML、WebGL。然后我可以这样写枚举:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!