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

Question

我有一个 ant 设计 table 在 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}} 我想 ONLY 在 [=25= 的值时显示 table 行]id 列等于 {{ $route.params.id}}.

到目前为止，我已经尝试过使用 v-show, style with display: none 但其中 none 可以正常工作，有人知道一种优雅的方法吗？我是前端编程的新手，所以对 Vue.js 了解不多。谢谢！

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

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

Show rows in dynamic table based on a parameter in Vue.js

javascript

vue.js

vuejs2

ant-design-vue