vue过滤器实现element-ui表格列数据转换

支付类型返回的是编码要转换成文字显示

通过 filters 选项来定义过滤器来实现转换。
JS 脚本处声明一个全局支付类型数组， 组件对象的 filters 选项指定转换规则

<script>
import memberApi from '@/api/member'

// 支付类型
const payTypeOptions = [
    {
     type: '1', name: '现金'},
    {
     type: '2', name: '微信'},
    {
     type: '3', name: '支付宝'},
    {
     type: '4', name: '银行卡'},
]

export default {
     
    
    data() {
     },
    filters: {
     
        payTypeFilter (type) {
     
            /* payTypeOptions.find(obj => {
            	// 全局的 payTypeOptions , 返回一个满足条件的对象
                return obj.type === type
            }) */
            // 在过滤 器当中不能引用当前实例 this   this.payTypeOptions 错误的
            const payObj = payTypeOptions.find(obj => obj.type === type)
            // 非空返回类型名称
            return payObj ? payObj.name : null
        }
    }

修改 模板代码

<el-table-column prop="money" label="开卡金额" ></el-table-column>
            <el-table-column prop="payType" label="支付类型" >
                <template slot-scope="scope">
                    <span>{
     {
     scope.row.payType | payTypeFilter}}</span>
                </template>

            </el-table-column>
            <el-table-column prop="address" label="会员地址" ></el-table-column>

转自梦学谷