什么是列舉Enum

列舉 Enum是在眾多語言中都有的一種資料型別，JavaScript中還沒有（TypeScript有），用來表示一些特定類別的常量資料，如性別、學歷、方向、賬戶狀態等，專案開發中是很常用的，

如上表中的性別列舉結構，前端頁面上顯示文字男、女，代碼中一般使用編碼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="https://www.cnblogs.com/anding/archive/2022/10/15/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 =https://www.cnblogs.com/anding/archive/2022/10/15/== 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="https://www.cnblogs.com/anding/archive/2022/10/15/list" :row-class-name="handleRowClass" border>
	<el-table-column prop="name"  label="姓名"></el-table-column>
	<el-table-column prop="sex"  label="性別" align="center" :formatter="enumSex.tableFormater"></el-table-column>
	<el-table-column prop="score"  label="分數" label-class-name="header-score" align="center"></el-table-column>
	<el-table-column label="操作" align="center"  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="https://www.cnblogs.com/anding/archive/2022/10/15/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

標籤：其他

上一篇：資料可視化

下一篇：x86_64警告：字符常量太長[-w other](nasm)