vue multiselect：如果为空则删除组标签

Question

例如打印屏幕，如果所有 child 都是 selected

，我想删除预期的组标签

在屏幕截图中，“列日（省）”是组标签（省）的一部分。如果我 select 它，它会从组中消失，但组标签仍然显示。

如果所有 child 元素都已标记，我如何隐藏或删除组标签或 LI 标签？

<multiselect
v-model="values"
:options="options"
track-by="label"
label="value"
ref="multiselect"
group-values="datas"
group-label="type"
:custom-label="styleOption"
:placeholder="$trans('common.search.search_placeholder')"
open-direction="bottom"
:multiple="true"
:searchable="true"
:internal-search="false"
:clear-on-select="true"
:close-on-select="false"
:options-limit="10"
:limit="5"
:limit-text="limitText"
:max-height="400"
:show-no-results="false"
:show-no-options="false"
:option-height="0"
:hide-selected="true"
@search-change="getCities"
@close="closeEventHandler">
<template slot="tag" slot-scope="{ option, remove }">
    <div class="custom_tag" @click="remove(option)">
        <span class="tag">{{ option.value }}</span>
        <div class="tag_close">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tag-close-icon"><path d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path></svg>
        </div>
    </div>
</template>
<template slot="option" slot-scope="props">
    <span v-if="props.option.$isLabel">{{ props.option.$groupLabel }}</span>
    <span v-else>{{ props.option.label }}</span>
</template>
</multiselect>

编辑：我认为我们应该在下面的“v-if”片段中添加一个条件“!props.option.length”，但它不起作用。

<template slot="option" slot-scope="props">
<span v-if="props.option.$isLabel && !props.option.length">{{ props.option.$groupLabel }}</span>
<span v-else>{{ props.option.label }}</span>
</template>

Answer 1

您只需要为选项计算属性。它将包含未包含的组。这是一个具有 filteredOptions 属性

的工作演示

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
   data () {
    return {
      options: [
        {
          language: 'Javascript',
          libs: [
            { name: 'Vue.js', category: 'Front-end' },
            { name: 'Adonis', category: 'Backend' }
          ]
        },
        {
          language: 'Ruby',
          libs: [
            { name: 'Rails', category: 'Backend' },
            { name: 'Sinatra', category: 'Backend' }
          ]
        },
        {
          language: 'Other',
          libs: [
            { name: 'Laravel', category: 'Backend' },
            { name: 'Phoenix', category: 'Backend' }
          ]
        }
      ],
      value: []
    }
  },
  computed:{
    filteredOptions(){
      return this.options.filter(el => el.libs.some(r=> !this.value.includes(r)))
    }
  }
})

body { font-family: 'Arial' }

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<body>
  <div id="app"> 
  <div>
  <label class="typo__label">Groups</label>
  <multiselect v-model="value" :options="filteredOptions" :multiple="true" group-values="libs" group-label="language" :group-select="false" :hide-selected="true" placeholder="Type to search" track-by="name" label="name"><span slot="noResult">Oops! No elements found. Consider changing the search query.</span></multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>
  
</div>
</body>

vue multiselect：如果为空则删除组标签

vue multiselect : remove group label if empty

vue.js

vue-multiselect