CODEWITHSUNDEEP
javascriptvue.js
Léo Coco
Léo Coco

Reputation: 4282

VueJs - Element Ui - Table same prop different filters

I'm building a table with a set of data. 

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

The prop date is going to be used to create two columns in my table date and day. 

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

I would like to be able to filter independently the column date and day. Or the filter method relies on the prop of the table.

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

What would be the best solution in such a situation ?

I would like to not duplicate my data date by creating a new key day since it is the same data but just filtered.

Is there any other solution or impossible to do without creating a new key day

https://jsfiddle.net/o56yveqq/

Upvotes: 1

Views: 1872

Answers (1)

Bert
Bert

Reputation: 82469

Use a computed value to get the tableData in the format you want.

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

Then in your template, use the computed value as your data instead of tableData.

Upvotes: 2

Related Questions