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, '未知']
    ])
    }
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    凸包模板
    F
    luogu P1220 关路灯
    [国家集训队]小Z的袜子
    [AHOI2009]维护序列
    luogu P3373 【模板】线段树 2
    [国家集训队]数颜色 / 维护队列
    luogu P3393 逃离僵尸岛
    [Usaco2005 Mar]Out of Hay 干草危机
    [USACO07NOV]牛栏Cow Hurdles
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/12170266.html
Copyright © 2011-2022 走看看