By 朱阳星

文章目录

垃圾代码印发的思考
看到项目里类似如下代码感觉肯定会有更好的写法：

1
2
3
4
5
6
7
8
9
10
11
12
<template slot-scope="scope">
    <el-tag type="primary" v-if="scope.row.status === '10'">已发单</el-tag>
    <el-tag type="success" v-if="scope.row.status === '11'">已接单</el-tag>
    <el-tag type="danger" v-if="scope.row.status === '12'">已提交</el-tag>
    <el-tag type="gray" v-if="scope.row.status === '13'">已完成</el-tag>
    <el-tag type="" v-if="scope.row.status === '14'">已撤销</el-tag>
    <el-tag type="warning" v-if="scope.row.status === '15'">已退回</el-tag>
    <el-tag type="warning" v-if="scope.row.status === '16'">已放弃</el-tag>
    <el-tag type="danger" v-if="scope.row.status === '17'">处理中</el-tag>
    <el-tag type="gray" v-if="scope.row.status === '18'">已过期</el-tag>
    <el-tag type="primary" v-if="scope.row.status === '19'">待发单</el-tag>
</template>

以上代码具体功能：
1.根据不同的状态码显示不同的文字
2.根据不同的状态码显示不同的type

仔细一想发现可以用filter来处理这种情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
let State = [
    {
        code: '10',
        type: 'success',
        text: '接受10'
    },
    {
        code: '11',
        type: 'primary',
        text: '接受11'
    },
    {
        code: '12',
        type: 'warning',
        text: '接受12'
    }
]
/**
 * 状态拦截器
 * @method   stateFilter
 * @param    {String}                value 接收的code
 * @param    {String}                key   "type"||"text"
 * @return   {String}  要显示的值
 * @datetime 2017-11-22T22:30:11+080
 */
let stateFilter = (value, key) => {
    let returnObj = ''
    let tmp = State.filter(function (item) {
            return item.code === value
    })
    if (tmp.length !== 0) {
        returnObj = tmp[0][key]
    }
    return returnObj
}

经过配置后一行代码即可解决
而且可以多处通用

1
2
3
<template slot-scope="scope">
  <el-tag :type="scope.row.status | stateFilter('type')">{{scope.row.status | stateFilter("text")}}</el-tag>
</template>
文章目录