元素 (VueJS) |条件表渲染

【问题标题】：Element (VueJS) | Conditional table rendering元素 (VueJS) |条件表渲染
【发布时间】：2018-07-04 14:12:13
【问题描述】：

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

我有一些从数组中获取数据的表（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 从 DB 获取 JSON，数组如下：

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

任何人都知道如何说元素表只显示具有属性“is_active”eq 0 或 1（或其他条件）的行？

【问题讨论】：

为什么不在将数据传递给组件之前对其进行过滤，例如使用计算属性？

标签： vue.js element axios

【解决方案1】：

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

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

然后将这个过滤列表绑定到组件：

<el-table :data="filteredList">

【讨论】：

如果someData 的初始值为[]，它可能应该是if (this.someData && this.someData.length)。
如果初始数组为空，filter 方法只会返回一个空数组。
但它不必触发array.filter()。
你是对的！抱歉，我一开始没明白你的意思。