时间戳

首页 > 解决方案 > Vuetify 克隆和过滤 v-select

vue.js - Vuetify 克隆和过滤 v-select

问题描述

我使用 vuetify v-select。我想使用第一个 v-select 中的数组选项克隆 v-select，并禁用（或删除）另一个 v-select 中的选定值。它可以被克隆多次，我希望如果例如选择了 4 v-select 选项 X，那么这个 X 选项将在所有其他 v-select 中被禁用（也在第一个和反向中）。

例如选项数组：

[
    { title: 'title 1', id: '1', status: '0' },
    { title: 'title 2', id: '2', status: '0' },
    { title: 'title 3', id: '3', status: '0' },
    { title: 'title 4', id: '4', status: '0' }
]

例子

在此处输入图像描述

标签： vue.jsvuejs2vue-componentvuexvuetify.js

解决方案

您可以让 vuetify v-select 将值克隆到多个选择框中，并从其余选择框中删除已选择的值

这是工作的codepen：https ://codepen.io/chansv/pen/wvvzbLX?editors=1010

您可以通过循环并将索引分配为选择框的键来拥有任意数量的选择框

找到下面的代码

    <div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-btn @click="addSelectBox(true)">add select box</v-btn>
        <div v-for="id in Object.keys(selectItems)" :key="id">
            <v-select
              v-model="selectItems[id].selected"
              :items="selectItems[id].available"
              label="Standard"
              item-key="id"
              item-value="id"
              multiple
              chips
              deletable-chips
              clearable
              @change="modifyOthers"
            ></v-select>
          <v-btn @click="deleteSelectBox(id)">delete select box</btn>
        </div>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selectItems: {},
    numberOfSelectBoxes: 4,
    itemsBucket: [
      { title: 'title 1', id: '1', status: '0' },
      { title: 'title 2', id: '2', status: '0' },
      { title: 'title 3', id: '3', status: '0' },
      { title: 'title 4', id: '4', status: '0' }
    ],
    allSelected: [],
    allUnSelected: [],
  }),
  methods: {
    modifyOthers(val, id) {
      this.updateAllSelected();
      this.updateAllUnselected();
      this.updateAllAvailable();
    },
    updateAllSelected() {
      this.allSelected = [];
      var self = this;
      Object.keys(self.selectItems).forEach(x => {
        self.allSelected = self.allSelected.concat(self.selectItems[x].selected);
      });
    },
    updateAllUnselected() {
      this.allUnSelected = [];
      var self = this;
      this.allUnSelected = self.itemsBucket.map(x => x.id).filter(x => !self.allSelected.includes(x));
    },
    updateAllAvailable() {
      var self = this;
      Object.keys(self.selectItems).forEach(key => {
        self.selectItems[key].available = self.itemsBucket.map(x => x.id).filter(x => {
          return self.selectItems[key].selected.includes(x) || self.allUnSelected.includes(x);
        });
      });
    },
    addSelectBox(fromUI) {
      var self = this;
      if (fromUI) {
        var currentLast = +Object.keys(self.selectItems)[Object.keys(self.selectItems).length -1];
        var newIndex = currentLast + 1;
        self.$set(self.selectItems, newIndex, {selected: '', available: []});
        self.selectItems[newIndex].available = self.allUnSelected;
      } else {
        for (var i = 1; i <= this.numberOfSelectBoxes; i++) {
          self.$set(self.selectItems, i, {selected: '', available: []});
          self.selectItems[i].available = self.itemsBucket.map(y => y.id);
        }
      }
    },
    deleteSelectBox(id) {
      delete this.selectItems[id];
      this.modifyOthers();
    }
  },
  created() {
    this.addSelectBox(false);
    this.updateAllUnselected();
  }
})

推荐阅读