I am working with an Ant Design table in Vue that is rendered dynamically based on an API data response using
:data-source="table_deployenv_data"<a-table :data-source="table_deployenv_data" :columns="columnsdeployenvs" bordered>
</a-table>
The columns are defined as follows:
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"],
},
{
.......
Currently, I have an 'env' parameter passed in as: {{ $route.params.id}} and I want to ONLY display the table rows where the value of the 'id' column equals {{ $route.params.id}}.
I have attempted using v-show and styling with display: none, but neither method seems to be working. Can anyone suggest a more elegant solution for achieving this? As someone new to frontend programming and Vue, any help would be greatly appreciated. Thanks!