0

I have an ant design table in vue rendered dynamically based on a API data response(:data-source="table_deployenv_data"):

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

Columns are defined as following:

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"],
        },
        {
        .......

Now I have an env parameter passed in: {{ $route.params.id}} and I want to ONLY display the table rows when the value of id column equals to {{ $route.params.id}}.

So far I've tried using v-show, style with display: none but none of them is working, does anyone knows an elegant way to do this? I'm really new to front end programming so don't know much about Vue. Thanks!

demid
  • 348
  • 5
  • 16

1 Answers1

1

Make a computed list

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>

Alternative

in data section add

table_deployenv_data_filtered=[]

in mounted method

this.table_deployenv_data_filtered = this.table_deployenv_data.filter(p=>p.id==this.$route.params.id);
Xilmiki
  • 1,453
  • 15
  • 22
  • Thanks so much! I tried it but the entire section got blank. The error is `vue.runtime.esm.js?2b0e:1888 RangeError: Maximum call stack size exceeded ... at VueComponent.computedGetter [as table_deployenv_data_filtered]`. It looks like the filtered data is too large. Is it possible to split the filtered data source for rendering? – demid Jul 14 '21 at 14:04
  • Maximum call stack size exceeded --> threre is a loop is some point . (alterenative: declare a local variable table_deployenv_data_filtered, remove computed, assign table_deployenv_data_filtered in "mouted" method),... correct method is "filter" (previous has a typo) – Xilmiki Jul 14 '21 at 18:16
  • Thanks! I changed removed `computed`, added it to mounted and it worked really well: `this.table_deployenv_data_filtered = this.table_deployenv_data.filter(p=>p.id==this.$route.params.id);` :) – demid Jul 15 '21 at 00:46