Оценить клон и фильтр v-select - PullRequest
Новая
       63

Оценить клон и фильтр v-select

1 голос
/ 18 октября 2019

Я использую 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' }
]

Пример

enter image description here

1 Ответ

1 голос
/ 18 октября 2019

Вы можете использовать vuetify 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();
  }
})
...