javascript - VueJs - Element Ui - 表格相同 Prop 不同过滤器

标签 javascript vue.js

我正在用一组数据构建一个表。

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

Prop date 将用于在我的表 dateday 中创建两列。

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

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

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

在这种情况下,最好的解决方案是什么?

我不想通过创建新键 day 来复制我的数据 date,因为它是相同的数据,只是经过过滤。

如果不创建新 key day,是否有任何其他解决方案或无法解决

https://jsfiddle.net/o56yveqq/

最佳答案

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

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

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

关于javascript - VueJs - Element Ui - 表格相同 Prop 不同过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43992033/

相关文章:

javascript - 无法使 vue.js element-ui 对话框在子组件内工作

javascript - 通过Vue js中的循环将鼠标悬停在特定项目上

javascript - 带悬停的 Bootstrap 选项卡弹出菜单

javascript - 在 JavaScript 的 HTML 标签中存储任意信息?

javascript - 为什么这个 JavaScript 事件没有被触发?

javascript - Vue cli 3 项目别名 src 到 @ 或 ~/不工作

javascript - bootstrap-vue 表 Action onclick

javascript - Vue 的 Saga 替代品

javascript - 需要 javascript 帮助来添加类

php - jQuery.post 回调数据为空