Element (VueJS) | Conditional table rendering

Question

The question is about VueJS Framework - Element: http://element.eleme.io

I have some table (el-table) who gets data from array:

<el-table :data="someData">
<el-table-column prop="id" label="№"></el-table-column>
<el-table-column prop="is_active" label="Active"></el-table-column>
</el-table>

axios get JSON from DB, the array looks like:

[
{
  "id":1,
  "is_active":0
},
{
  "id":2,
  "is_active":1
},{
  "id":3,
  "is_active":1
}
]

Anyone knows how to say Element table show only rows with property "is_active" eq 0 or 1 (or another condition)?

Why not filter the data before passing it to the component, e.g. using a computed property? — connexo
– connexo, Commented Jan 25, 2018 at 10:49

tony19 · Accepted Answer · 2022-07-15 21:47:25Z

3

You could use a computed property filtering your array, such as :

computed: {
  filteredList() {
    if (this.someData) {
      return this.someData.filter(data => data && data.is_active);
    }
    return [];
  },
},

And then bind this filtered list to the component :

<el-table :data="filteredList">

edited Jul 15, 2022 at 21:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 25, 2018 at 11:12

Thomas Ferro

2,45221 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

connexo Over a year ago

It should probably be if (this.someData && this.someData.length) in case someData has an initial value of [].

Thomas Ferro Over a year ago

The filter method simply returns an empty array if the initial array is empty.

connexo Over a year ago

But it won't have to trigger array.filter().

Thomas Ferro Over a year ago

You're right ! Sorry I didn't get your point in the first place.

Collectives™ on Stack Overflow

Element (VueJS) | Conditional table rendering

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related