枚举 函数式编程封装

案例是react     但思路也同样适用于vue ,  在vue,react 封装写法一样

// 封装公共方法
const showOptionLabel = (optionList: any[], key: string) => {
  if(!optionList) return false

  let filterObj = optionList.filter((item) => item.value == key);

  return filterObj.length > 0 ? filterObj[0].label : "";

};

export default showOptionLabel;

//json
{"data":{"YESNO":[{"label":"是","value":"1"},{"label":"否","value":"0"}]},"code":200,"isSuccess":true,"msg":""}

const [arrYesNo, setArrYesNo] = useState<any[]>([]);

  useEffect(() => {
    queryColumnsSelectList();
  }, []);
  const queryColumnsSelectList = async () => {
    .
    .
    .  //接口调用省略几行
    if (res.code==='00000') {
      const { YESNO } = res.data;
      setArrYesNo(YESNO);
    }
  };

页面table 使用  

const columns:any=[
    {
      title: "FORECASTTYPE",
      dataIndex: "forecastType",
      key: "forecastType",
      align: "center",
      width: 180,
      ellipsis: true,
      render: (text: any, record: any) => {
        return showOptionLabel(arrYesNo, text);
      },
    },
]