element ui table 过滤表格内的数据的问题

Question

我使用element ui tabel的组件

<el-table :data="barrelList" style="width: 100%">
    <el-table-column
        prop="workingState"
        label="工作状态">
      </el-table-column>
</el-table>

const workingState = [
    { key: '1', display_name: '状态11' },
    { key: '2', display_name: '状态22' },
    { key: '4', display_name: '状态55' },
    { key: '8', display_name: '状态33' },
    { key: '10', display_name: '状态44' }
  ]

  const workingStateValue = workingState.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

filters: {
      workingFilter(type) {
        return workingStateValue[type]
      }
    },

我希望通过workingFilter的过滤去过滤表格内的数据，但我这样处理时：

<el-table :data="barrelList" style="width: 100%">
    <el-table-column
        prop="workingState | workingFilter"
        label="工作状态">
      </el-table-column>
</el-table>

是没有效果的，能有什么解决方案吗

Answer 1

过滤数据用 computed 计算属性来实现

| 不是这样用的

Answer 2

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。,作为prop属性值，显然没有效果。

prop的属性值，应该对应barrelList里面相应属性名。这里过滤应该没什么效果。

可以在 el-table-column上使用 filter-method 属性，绑定一个回调函数，进行每列数据过滤。