Question

我正在构建一个包含一组数据的表。

{
  date: '2016-05-03',
  name: 'Tom'        
  address: 'No. 189, Grove St, Los Angeles',
  tag: 'Home'
}

道具date将用于在我的表date和day中创建两列。

  getDay(row, column) {
    return row.date.slice(8,10);
  },

我希望能够独立过滤列date和day。或者过滤方法依赖于表的prop。

filterTag(value, row) {
    return row.tag === value;
  },
  filterDay(value, row) {
    return row.date === value;
  }

在这种情况下，最佳解决方案是什么？

我希望不要通过创建新密钥date来复制我的数据day，因为它是相同的数据，但只是过滤了。

如果没有创建新密钥day

，是否还有其他解决办法或无法做到

https://jsfiddle.net/o56yveqq/

Answer 1

使用计算值以您想要的格式获取tableData。

computed:{
    dataWithDay(){
        return this.tableData.map(d => {
            return {
            ...d,
            day: d.date.slice(8,10)
          }
        })
    }
},

然后在您的模板中，使用计算值作为数据，而不是tableData。

VueJs - 元素Ui - 表同样支持不同的过滤器

1 个答案: