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

Question

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!

Xilmiki · Accepted Answer · 2021-07-15 14:55:21Z

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

edited Jul 15, 2021 at 14:55

answered Jul 14, 2021 at 11:42

Xilmiki

1,50917 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

demid Over a year ago

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?

Xilmiki Over a year ago

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)

demid Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related