javascript - 如何创建自定义过滤器以将所选项目排列在 Vue.js 中多选 v-autocomplete 的顶部

Question

我在 Vue.js/Vuetify.js 中有一个具有自定义过滤器的多选下拉菜单 - 我知道过滤仅在您在字段中搜索/输入时才起作用，我想知道是否可以按以下项目进行排序检查过。并将它们放在下拉列表的顶部？

<v-autocomplete v-model="defendantCode"
     label="Defendant Code"
     :items="defendantCodeOptions"
     :loading="defendantCodeIsLoading"
     :filter="customFilter"
     clearable
     multiple
     dense>
</v-autocomplete>

在我的 Javascript 中，我设置要像这样选择的项目

this.defendantCode = [23,43,556];

现在我想对所选内容进行排序以显示在下拉列表的顶部。

这可能吗？

我有一个自定义过滤器，但了解它仅用于搜索。

Answer 1

过滤器不起作用，因为它是针对项目列表执行的。这使您无法控制更改顺序。

我已经查看了源代码，我认为最好的选择是更改列表。这是一个例子:

  methods: {
    onChange() {
      states = this.states.sort();
      var selected = states.filter(s => this.model.includes(s))
      var notSelected = states.filter(s => !this.model.includes(s))
      this.states = [...selected, ...notSelected];
    }
  },
  mounted(){
    this.onChange(); // for initial sort, you might want to put this somewhere else or add additional listeners
  }

<v-autocomplete
  v-model="model"
  :items="states"
  :multiple="true"
  @change="onChange"
>

每次发生更改时都会重新生成列表。列表首先排序 sort()，这确保项目始终按字母顺序排序，然后将其分为选定的和未选定的，并按该顺序连接在一起。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      model: ['Louisiana', 'Maine', 'Marshall Islands'],
      states: [
        'Alabama', 'Alaska', 'American Samoa', 'Arizona',
        'Arkansas', 'California', 'Colorado', 'Connecticut',
        'Delaware', 'District of Columbia', 'Federated States of Micronesia',
        'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada',
        'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
        'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin', 'Wyoming',
      ],
    }
  },
  methods: {
    onChange() {
      states = this.states.sort();
      var selected = states.filter(s => this.model.includes(s))
      var notSelected = states.filter(s => !this.model.includes(s))
      this.states = [...selected, ...notSelected];
    }
  },
  mounted(){
    this.onChange()
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.0.17/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
      <v-card-text>
        <v-subheader class="pa-0">Where do you live?</v-subheader>
        <v-autocomplete v-model="model" :items="states" :multiple="true" prepend-icon="mdi-city" @change="onChange">
        </v-autocomplete>
      </v-card-text>
    </v-card>
  </v-app>
</div>