0

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

<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列的值等于时显示表行{{ $route.params.id}}。

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

4

1 回答 1

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);
于 2021-07-14T11:42:05.667 回答