Vue項目功能實現策略：Element UI 表格內容格式化方案

前言

Vue項目中常常遇到表格內容要根據接口數據格式化展現，好比：接口返回時間戳格式1560565657109，表格要展現爲'2019.06.15 10:27:37'。下面介紹3種格式化數據的方案並簡述其使用場景，但願幫助你們在項目中能夠準肯定位快速開發。

1. 表格列屬性 formatter

當只須要對數值改變的狀況時，可經過 element-ui 表格列屬性 formatter 直接實現。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column prop="height"
            label="身高(cm)"
        ></el-table-column>
        <el-table-column prop="weight"
            label="體重(kg)"
        ></el-table-column>
        <el-table-column label="BMI"
            :formatter="bmiFormatter"
        ></el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '張三',
                height: '160',
                weight: '80'
            }, {
                name: '李四',
                height: '176',
                weight: '65'
            }]
        }
    },
    methods: {
        bmiFormatter (row, column, cellValue, index) {
            // row: 行數據
            // column: 列屬性
            // cellValue: 單元格數據值
            // index: 行索引，注意：2.3.9版本之後纔有。
            return (row.weight / Math.pow((row.height / 100), 2)).toFixed(1)
        }
    }
}
</script>

2. 標籤 template

當表格內容根據接口數據須要進行顏色等樣式上改變時，須要藉助 <template slot-scope="scope"></template> 來實現。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="成績">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.scores >= 60 ? 'green' : 'red'
                }">
                    {{ scope.row.scores }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '王朝',
                scores: '86'
            }, {
                name: '馬漢',
                scores: '59'
            }]
        }
    }
}
</script>

3. 標籤 template 配合和過濾器 filters

當表格內容急須要數據上的轉換又須要樣式改變時，須要 <template slot-scope="scope"></template> 和 Vue 的過濾器 filters 搭配實現。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="性別">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.gender === 'male' ? 'blue' : 'red'
                }">
                    {{ scope.row.gender | genderFormatter }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '李雷',
                gender: 'male'
            }, {
                name: '韓梅梅',
                gender: 'female'
            }]
        }
    },
    filters: {
        genderFormatter (gender) {
            const map = {
                male: '♂',
                female: '♀'
            }
            return map[gender]
        }
    }
}
</script>

• 參考：

  1. Element UI 表格：https://element.eleme.cn/2.9/...
  2. Vue 插槽：https://cn.vuejs.org/v2/guide...
  3. Vue 過濾器：https://cn.vuejs.org/v2/guide...