元素（VueJS） |条件 table 渲染

Question

问题是关于 VueJS 框架 - 元素：http://element.eleme.io

我有一些 table (el-table) 从数组中获取数据：

<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 从数据库中获取 JSON，数组如下所示：

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

任何人都知道怎么说 Element table show only rows with 属性 "is_active" eq 0 or 1 (or another condition)?

Answer 1

您可以使用 computed property 过滤数组，例如：

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

然后将此筛选列表绑定到组件：

<el-table :data="filteredList">

元素（VueJS） |条件 table 渲染

Element (VueJS) | Conditional table rendering

element

vue.js

axios