JS 实现一个可以根据属性查询成员的构造类 ——Jsutil类

<template>
<select >
//A处需要展示所有状态进行筛选，我们这可以取巧直接循环对象；
    <option v-for="(item, index) in STATUS" :value="index">{{item}}</option>
<select/>
<table>
    <tr v-for="row in data">       
        //B处需要可以直接取值，这里是最方便的；
        <td>{{STATUS[row.status]}}</td>
        <td>
        //C处需跟进状态显示不同操作面板，这时候需要判断，就不友好了，得直接判断数字，STATUS根本就没用。
            <button v-if="row.status === 100" @click="xx">上传中的操作</button>
            <button v-else-if="row.status === 200" @click="xx">上传完成，审核的操作</button>
            <button v-else-if="row.status === 300" @click="xx">审核完的操作</button>
        </td>
    </tr>
</table>
</template>
<script setup>
import {STATUS} from 'dicts.js'
const data = [{order:'订单巴拉',status:100},{order:'订单巴拉222',status:200}]
</script>

//dicts.js
<script>
export const STATUS = {
    100 : '上传中',
    200 : '审核中',
    300 : '已完成'
}
</script>

...
    //A处选择下拉框业务
    <option v-for="item in options" :value="item.value">{{item.label}}</option>
    ...
    //B处，展示状态描述中文  这里你就会发现使用value属性可以直接反向取到中文描述的       
        <td>{{STATUS[row.status].label}}</td>
        ...
        //C处业务，显示不同操作面板还是需要判断，但不会再出现数字
            <button v-if="row.status === STATUS.UPLOADING.value" @click="xx">等待中的操作</button>
            <button v-else-if="row.status === STATUS.EXAMINE.value" @click="xx">进行种的操作</button>
            <button v-else-if="row.status === STATUS.FINISH.value" @click="xx">已完成的操作</button>
        ....
<script setup>
import {STATUS} from 'dicts.js';

//STATUS 实例是返回的对象，需要变量数组时可以通过方法获取到数组
const options = STATUS.getArray();

const data = [{order:'订单巴拉',status:100},{order:'订单巴拉222',status:200}]
</script>

//dicts.js
<script>
//jsutil._CreateDicts是封装好的方法，
export const STATUS = jsutil._CreateDicts({
    'UPLOADING' : [100, '等待中'],
    'EXAMINE' : [200,  '进行中' ],
    'FINISH' : [ 300,  '已完成' ]
});
</script>