Vue實現多標簽選擇器

更新時間：2019年11月28日 17:11:57 作者：彭世瑜

這篇文章主要為大家詳細介紹了Vue實現多標簽選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現多標簽選擇器展示的具體代碼，供大家參考，具體內容如下

實現效果

實現代碼

<html lang="en">

<head>
 <title>Document</title>

 <!-- 引入本地組件庫 -->
 <link rel="stylesheet" href="static/element-ui/index.css" >
 <script src="static/element-ui/vue.js"></script>
 <script src="static/element-ui/index.js"></script>

 <!-- 引入CDN樣式 -->
 <!-- <link rel="stylesheet"  > -->
 <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

 <style>
  .not-active {
   display: inline-block;
   font-size: 12px;
   margin: 5px 8px;
  }
  
  span {
   margin: 0 2px;
  }
 </style>
</head>

<body>

 <div id="app">
  <!-- 待選標簽 -->
  <div v-for='(category, categoryIndex) in categories' :key="category.id">
   <!-- 分類 -->
   <span class="not-active">{{category.name}}：</span>

   <template>
    <span v-if="category.count"class="not-active" @click="clearCategory(category, categoryIndex)"> 不限</span>
    <my-tag v-else>不限</my-tag>
   </template>

   <!-- 標簽 -->
   <template v-for='(child, childIndex) in category.children'>
    <my-tag v-if="child.active" :closable='true' @click-child='clickChild(category, categoryIndex, child, childIndex)'>
     {{ child.name }}
    </my-tag>
    <span v-else class="not-active" @click='clickChild(category, categoryIndex, child, childIndex)'>{{ child.name }}</span>
   </template>
  </div>

  <!-- 已選標簽 -->
  <div v-if='conditions.length'>
   <span class="not-active" @click="clearCondition">清空已選：<span>
    
   <el-tag
   v-for='(condition, index) in conditions' 
   :key="condition.id"
   type="primary"
   :closable="true"
   size="small"
   :disable-transitions="true"
   @close='removeCondition(condition, index)'
   @click='removeCondition(condition, index)'>
    {{condition.name}}
   </el-tag>
  </div>
 </div>

 <script src="./data.js"></script>

 <script>
  // 簡單封裝一個公用組件
  Vue.component('my-tag', {
   template: "<el-tag v-bind='$attrs' v-on='$listeners' effect='dark' size='small' :disable-transitions='true' @click='clickChild' @close='clickChild'><slot></slot></el-tag>",

   methods: {
    clickChild() {
     this.$emit("click-child")
    }
   }
  });

  var app = new Vue({
   el: '#app',
   data() {
    return {
     categories, // 分類標簽，可從外部加載配置
     conditions: [] // 已選條件
    }
   },

   watch: {
    // 監(jiān)聽條件變化，按照請求接口拼裝請求參數
    conditions(val){
     let selectedCondition = {};

     for(let categorie of this.categories){
      let selected_list = [];
      for(let child of categorie.children){
       if(child.active){
        selected_list.push(child.name);
       }
      }
      selectedCondition[categorie.name] = selected_list.join("|")
     }
     console.log(selectedCondition);
    }
   },

   methods: {
    // 處理標簽點擊事件，未選中則選中，已選中則取消選中
    clickChild(category, categoryIndex, child, childIndex) {
     let uid = `${categoryIndex}-${childIndex}`
     child.uid = uid;
     console.log(uid)
     
     // 取消選擇
     if (child.active === true) {
      category.count--;
      child.active = false;
      this.conditions.forEach((conditionChild, index) => {
       if (conditionChild.uid === child.uid) {
        this.conditions.splice(index, 1);
       }
      });
     // 選擇
     } else {
      category.count++;
      child.active = true;
      this.conditions.push(child);
     }
    },
   
    // 清除已選整個類別標簽
    clearCategory(category, categoryIndex) {
     category.count = 0;
     
     // 可選列表均為未選中狀態(tài)
     category.children.forEach(child => {
      child.active = false;
     })

     // 清空該類已選元素
     for (let index = this.conditions.length - 1; index >= 0; index--) {
      const conditionChild = this.conditions[index];
      if (conditionChild.uid.startsWith(categoryIndex)) {
       this.conditions.splice(index, 1);
      }
     }
    },
    
    // 移除一個條件
    removeCondition(condition, index) {
     let categoryIndex = condition.uid.split("-")[0];
     this.categories[categoryIndex].count --;

     this.conditions.splice(index, 1)
     condition.active = false;
    },

    // 清空所有條件
    clearCondition() {
     for(let i = this.conditions.length-1; i >=0 ; i--){
      this.removeCondition(this.conditions[i], i);
     }
    }
   }
  });
 </script>

</body>

</html>

標簽篩選的數據格式

data.js

var categories = [{
 name: '品牌',
 count: 0,
 children: [{
  name: '聯想',
 }, {
  name: '小米',

 }, {
  name: '蘋果',

 }, {
  name: '東芝',

 }]
}, {
 name: 'CPU',
 count: 0,
 children: [{
  name: 'intel i7 8700K',

 }, {
  name: 'intel i7 7700K',

 }, {
  name: 'intel i9 9270K',

 }, {
  name: 'intel i7 8700',

 }, {
  name: 'AMD 1600X',


 }]
}, {
 name: '內存',
 count: 0,
 children: [{
  name: '七彩虹8G',

 }, {
  name: '七彩虹16G',

 }, {
  name: '金士頓8G',

 }, {
  name: '金士頓16G',

 }]
}, {
 name: '顯卡',
 count: 0,
 children: [{
  name: 'NVIDIA 1060 8G',

 }, {
  name: 'NVIDIA 1080Ti 16G',

 }, {
  name: 'NVIDIA 1080 8G',

 }, {
  name: 'NVIDIA 1060Ti 16G',

 }]
}]

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: