Question

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

例如options数组：

[
    { 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' }
]

示例

Answer 1

您可以通过v-select来将值克隆到多个选择框，以及从其余选择框中删除已选择的值

以下是有效的代码笔：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();
  }
})

Vuetify克隆并筛选v-select

1 个答案: