实战中的策略模式

export const StrategyMap = {


    /* Strategy 1: 将文件大小（bit）转化为 KB */

    bitToKB: val => {


        const
            num =
                Number
                (val)


        return
        isNaN(num) ? val : (num /
                1024
            ).toFixed(
            0
            ) +
            'KB'

    },


    /* Strategy 2: 将文件大小（bit）转化为 MB */

    bitToMB: val => {


        const
            num =
                Number
                (val)


        return
        isNaN(num) ? val : (num /
                1024
                /
                1024
            ).toFixed(
            1
            ) +
            'MB'

    }

}


/* Context: 生成el表单 formatter */

const strategyContext = function (type, rowKey) {


    return function (row, column, cellValue, index) {


        StrategyMap
            [type](row[rowKey])

    }

}


export default strategyContext

组件中的实际应用

<template>

    
<el-table
 :
data
=
"tableData"
>

        
<el-table-column
 
prop
=
"date"
 
label
=
"日期"
></el-table-column>

        
<el-table-column
 
prop
=
"name"
 
label
=
"文件名"
></el-table-column>

        
<!-- 直接调用 strategyContext -->

        
<el-table-column
 
prop
=
"sizeKb"
 
label
=
"文件大小(KB)"

                         :
formatter
=
'strategyContext("bitToKB", "sizeKb")'
>

        
</el-table-column>

        
<el-table-column
 
prop
=
"sizeMb"
 
label
=
"附件大小(MB)"

                         :
formatter
=
'strategyContext("bitToMB", "sizeMb")'
>

        
</el-table-column>

    
</el-table>

</template>