根据Vue.js中的参数显示动态表中的行

Question

我有一个基于API数据响应(:data-source="table_deployenv_data"(动态呈现的vue中的蚂蚁设计表：

<a-table :data-source="table_deployenv_data" :columns="columnsdeployenvs" bordered>
</a-table>

列定义如下：

columnsdeployenvs: [
{
title: "ID",
dataIndex: "id",
key: "id",
},
{
title: "Env",
dataIndex: "env",
key: "env",
scopedSlots: {
filterDropdown: "filterDropdown",
filterIcon: "filterIcon",
customRender: "customRender",
},
onFilter: (value, record) =>
record.env.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
setTimeout(() => {
this.searchInput.focus();
}, 0);
}
},
sorter: (a, b) => a.modulename.localeCompare(b.moduleame),
sortDirections: ["descend", "ascend"],
},
{
.......

现在我传入了一个env参数：{{ $route.params.id}}，并且当id列的值等于{{ $route.params.id}}时，我希望ONLY显示表行。

到目前为止，我已经尝试过使用带显示的v-show：它们都不起作用，有人知道一种优雅的方法吗？我对前端编程真的很陌生，所以对Vue了解不多。谢谢

Answer 1

制作一个计算列表

computed: {
table_deployenv_data_filtered: {
get: function () {
return this.table_deployenv_data_filtered.filter(p=>p.id==$route.params.id);
}


}
}

<a-table :data-source="table_deployenv_data_filtered" :columns="columnsdeployenvs" bordered>
</a-table>

替代

在数据部分添加

table_deployenv_data_filtered=[]

嵌入式

this.table_deployenv_data_filtered = this.table_deployenv_data.filter(p=>p.id==this.$route.params.id);