Vue后台中如何优雅的书写状态标签

　　介绍

这篇文章主要介绍Vue后台中如何优雅的书写状态标签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

前言

在后台系统开发中,对于列表,常常有一些状态字段的展示,比如审核状态,退货申请状态等等,并且往往伴随有状态筛选的列表查询条件,同时状态显示对应不同颜色,在写代码时有些人往往是这么做的:

& lt; template> 　　& lt;才能el-form :模型=皅uery"比; 　　,,,& lt; el-form-item 标签=吧笈刺?,支持=皊tatus"比; 　　,,,,,& lt; el-select  v模型=皅uery.status", clearable> 　　,,,,,,,& lt; el-option 　　,,,,,,,,,)=癷tem 拷贝statusOptions" 　　,,,,,,,,,:关键=癷tem.value" 　　,,,,,,,,,:标签=癷tem.label" 　　,,,,,,,,,:价值=https://www.yisu.com/zixun/癷tem.value”/> 　　 　　 　　 　　 　　重置 　　 　　 　　 　　 　　审核中 　　审核成功 　　审核失败 　　 　　 export  default  { 　　数据才能(),{ 　　,,,return  { 　　,,,,,查询:,{ 　　,,,,,,,,,状态:零 　　,,,,,}, 　　,,,,,statusOptions:, 　　,,,,,,,,,{,标签:& # 39;审核中& # 39;,,值:,0,}, 　　,,,,,,,,,{,标签:& # 39;审核成功& # 39;,,值:,1,}, 　　,,,,,,,,,{,标签:& # 39;审核失败& # 39;,,值:,2,} 　　,,,,,, 　　,,,,,:列表,[] 　　,,,} 　　,,} 　　}

以上代码虽然是实现了需求,但却显得不够优雅,代码维护成本较高:

<李>

标签里充斥着较多的v且与数据里的数据重复,造成冗余。

<李>

当有新增或修改时,需要改动多个地方,例如要改动文案时下拉框和表格里的都要改。

<李>

如果是多个页面都有该状态需要显示,复制粘贴,最后当需求变动时势必会增加改动成本。

优化

针对上面的问题,咱们通过以下措施来进行抢救。

抽离变量<强>

建立常量文件存放statusOptions,增加el-tag组件的类型字段来区分显示不同的颜色,最后将其导出。

//,/index.js const//,审核状态 　　const  statusOptions =, ( 　　{才能,标签:& # 39;审核中& # 39;,,值:,0,,类型:,& # 39;主要# 39;,}, 　　{才能,标签:& # 39;审核成功& # 39;,,值:,1,类型:,& # 39;成功# 39;,}, 　　{才能,标签:& # 39;审核失败& # 39;,,值:,2,类型:,& # 39;危险# 39;,} 　　] 　　 　　export  { 　　statusOptions才能 　　}

二次封装el-tag组件

//,/stats-tag.vue组件 　　& lt; template> 　　& lt;才能el-tag : type=癵etValue(& # 39;类型# 39;)“比; 　　,,,{{,getValue(& # 39;标签# 39;),}} 　　& lt;才能/el-tag> 　　& lt;/template> export  default  { 　　,,名字:& # 39;StatusTag& # 39; 　　,, 　　,,道具:{ 　　,,,选择:,{ 　　,,,,,:类型,数组, 　　,,,,,要求:,真的, 　　,,,,,默认值:,(),=祝辞,[] 　　,,,}, 　　,,,状态:,{ 　　,,,,,类型:,(字符串,数字), 　　,,,,,要求:真实 　　,,,} 　　,,}, 　　,, 　　计算才能:{ 　　,,,getValue({选项的不同之处是,status }), { 　　,,,,,return (关键),=祝辞,{ 　　,,,,,,,const  item =, options.find (e =祝辞,e.value ===,状态) 　　,,,,,,,return  (item ,,,项目(例子)),| |,& # 39;& # 39; 　　,,,,,} 　　,,,} 　　,,} 　　}

使用

& lt; template> 　　& lt;才能el-form :模型=皅uery"比; 　　,,,& lt; el-form-item 标签=吧笈刺?,支持=皊tatus"比; 　　,,,,,& lt; el-select  v模型=皅uery.status", clearable> 　　,,,,,,,& lt; el-option 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

Vue后台中如何优雅的书写状态标签