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

如何解决根据 Vue.js 中的参数显示动态表中的行

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

<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 列的值等于 {{ 1}}。

到目前为止，我已经尝试使用 v-show,style with display: none 但它们都没有工作，有没有人知道一种优雅的方法来做到这一点？我对前端编程真的很陌生，所以对 Vue 不太了解。谢谢！

解决方法

制作一个计算列表

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);