Vuetify 克隆和过滤 v-select

Posted 2023-02-23

【中文标题】Vuetify 克隆和过滤 v-select

【英文标题】：Vuetify clone and filter v-select

【发布时间】：2020-02-15 15:26:39

【问题描述】：

我使用 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' 
]

示例

【参考方案1】：

您可以使用 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();
  
)

【讨论】：

谢谢！它的工作很棒！但是..我需要动态添加行的选项（如图片中根据需要动态添加和删除行，而不是从一开始就设置它）..当我使用数组执行此操作时，出于某种原因将其清除所有数据..你知道为什么吗？天呐！！！ @chans

是的，可以添加和删除行，只需将创建的钩子中的逻辑包装到函数中

我试过了。但是由于某种原因，一旦我推送所有内容，就会重置..（在这种情况下）

代码更新支持动态添加和删除选择框codepen.io/chansv/pen/wvvzbLX?editors=1010

你是冠军！太感谢了！ ?