vuetable-2中的Vue-multiselect v-model =“ value [?]”

时间:2018-08-29 11:39:51

标签: vue.js vuejs2 vue-component multi-select vue-tables-2

我正在为表使用vuetable-2。在一栏中,我需要选择多个,所以我使用的是Vue-multiselect。问题是,Vue-multiselect使用v-model =“ value”,因此当我在一行中选择某项时,所有其他行都将使用相同的选择进行更新。

如果这是用于渲染表的前循环,那么我将使用v-model =“ value [row.id]”,但是在vuetable-2中,我不知道如何访问表行的ID。我尝试过:v-model =“ value [id]”,v-model =“ value [data.id]”,v-model =“ value [rowData.id]”,但似乎没有任何效果(是的,在我的数据,每个条目都有自己的ID)。

<template>
  <div>
    <filter-bar></filter-bar>
    <vuetable ref="vuetable"
              api-url="api/product-changes"
              :fields="fields"
              pagination-path=""
              @vuetable:pagination-data="onPaginationData"
              :per-page="3"
              :sort-order="sortOrder"
              :append-params="moreParams"
    >
      <template slot="multiselect" slot-scope="props">
        <multi-select :options="options"
                      v-model="value" // here is the problem
                      track-by="id"
                      label="name"
                      :multiple="true"
        ></multi-select>
      </template>
    </vuetable>
    <div class="vuetable-pagination ui basic segment grid">
      <vuetable-pagination-info ref="paginationInfo"
      ></vuetable-pagination-info>
      <vuetable-pagination ref="pagination"
                           @vuetable-pagination:change-page="onChangePage"
      ></vuetable-pagination>
    </div>
  </div>
</template>

picture of my table and multiselect options

2 个答案:

答案 0 :(得分:0)

找到了,

v-model="value[props.rowData.id]"

似乎正在工作。

答案 1 :(得分:0)

在我的情况下不使用

track-by="id"
label="name"

它对我来说很好用:

        <multiselect
              v-model="rowData.id"
              :options="options"
              optionsLimit="2000"
              placeholder=""
              max="3"
              maxHeight="600"
              :selected.sync="selected"
              :show-labels="false"
              :searchable="true"
              :allow-empty="false"
              :multiple="true"
              :preserve-search="true"
              :preselect-first="false"
              >

并访问 rowData.id 所以 rowData 必须是一列,如果 rowData 是一个数组,那么你可以通过指定这样的列来访问你的 id rowData[index].id