zoukankan      html  css  js  c++  java
  • vue项目el-table插槽template scope使用导致过滤器无法生效

    eg.最初的写法:

    <el-table-column
    v-for="info in tableHeader"
    :key="info.key"
    :label="info.label"
    :formatter="formatterFn" // 过滤方法不执行
    >
    <template slot-scope="scope">
    <span>{{ scope.row[info.key] }}</span> // key用了template socpe包裹
    </template>
    </el-table-column> 
    改为:
    <el-table-column
    v-for="info in meta.tableHeader"
    :key="info.key"
    :label="info.label"
    :prop="info.key"
    :formatter="formatterFn"
    />
    import { staticFormatterMap } from '@/utils/formatterMap' // 需要过滤字段的静态文件
    // 过滤字段
    formatterFn(row, column) {
    let _val = ''
    const _formatterMap = Object.assign({}, this.formatterMap, staticFormatterMap) // 动态和静态数据求交集
    if (column.property in _formatterMap) {
    _val = _formatterMap[column.property].get(row[column.property])
    } else {
    _val = row[column.property]
    }
    return _val
    }
    formatterMap.js文件:
    export const staticFormatterMap = {
    sex: new Map([ // 性别  sex:要过滤的table字段名
    [2, '女'],
    [1, '男'],
    [3, '未知']
    ])
    }
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    Spring类中的split()方法
    单例模式
    c#操作文件
    c#选择文件
    c#判断程序是否正在运行
    .net创建文件夹和txt文件
    .net 程序睡眠之后执行
    .net读取txt文件
    .net Post Json数据
    sql查看表结构以及表说明
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/12170266.html
Copyright © 2011-2022 走看看