可过滤不适用于vue-good-table中的自定义列

时间:2019-12-23 21:10:27

标签: vue.js nuxt.js

我正在尝试过滤Name中标记为action的自定义列(vue-good-table字段,下面的列代码)。但这不是在过滤自定义列数据。

模板文件:

<vue-good-table
          :line-numbers="false"
          :columns="columns" 
          :rows="rankArray"
          :search-options="{
            enabled: true,
            skipDiacritics: true,
            placeholder: 'Search Name List',
          }"
          styleClass="vgt-table striped">

          <template slot="table-row" slot-scope="props" class="">
            <span v-if="props.column.field == 'action'">
              <button class="name_button" v-on:click="say(props.row.name)"> 
                {{props.row.name}}
              </button>                  
            </span>
            <span v-else>
              {{props.formattedRow[props.column.field]}}
            </span>
          </template>     
</vue-good-table>

这里的rankArray只是对数据进行了排序,并带有一个额外的列,其中包含等级索引值。 表格的数据列如下所示:

columns: [
    {
      label: 'Rank',
      field: 'rank',
      filterable: false,
      sortable: false,
    },  
    {
      label: 'Name',
      field: 'action',
      filterable: true,
      sortable: false,
      tdClass: this.nameClassFunc,
    },
    {
      label: 'Rating',
      field: 'rating',
      filterable: false,
      sortable: false,
    },
  ],

我只想过滤带有标签的Name列(字段名action)。我该如何实现?

0 个答案:

没有答案