// main.jsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

datas() { // 每次搜索的數據 根據下拉菜單的值的變化 if (this.value !== "") { return this.listItem.list.filter(item => {  return item.BrandNames.includes(this.value); }); } else { return this.listItem.list; // 沒有搜索的關鍵詞時展示全部數據 } },

filDatas() { // 利用reduce 下拉菜單去重 var obj = {}; return this.listItem.list.reduce(function(item, next) { obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next)); return item; }, []); }

// 每次搜索列表的全選 與 取消全選 ckAll() { this.allck = !this.allck; //點擊全選 變 取消選擇 let arrys = []; //存放復選框為取消狀態的數據 if (this.allck) { // 將當前搜索的列表數據追加到已選中 this.datas.forEach(item => {  item.ck = true;   if (!this.arr.includes(item)) { // 追加復選框為false的數據  this.arr.push(item);  this.ckarr.push(item);  } }); } else { this.datas.forEach(item => { item.ck = false; }); //當前搜索的數據列表復選框設為取消狀態 arrys = this.datas.filter(item => { return !item.ck; }); //把復選框為false的數據 拿出來 this.datas.forEach(items => { //已選那里刪除當前搜索列表復選框為false的數據  arrys.forEach(item => {  if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);}  }); }); this.ckarr = []; //當前搜索列表為復選框的數據清空 } },

// 監聽當前搜索列表的勾選數據 ckarr: function() { if (this.value !== "") { this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已選等于當前搜索列表 改變全選狀態 } }

handleClose(tag) { this.arr.splice(this.arr.indexOf(tag), 1); // 點哪刪哪 this.ckarr.forEach(items => { // 判斷刪除的是否是當前搜索列表的數據 是的話改變全選狀態 if (items.BrandID == tag.BrandID) {  this.ckarr.splice(this.ckarr.indexOf(tag), 1); } }); this.listItem.list.forEach(items => { // 刪除已選時改變數據列表狀態 if (items.BrandID == tag.BrandID) { items.ck = false; } }); },

<template> <div class='tpbox'> <el-select v-model="values" filterable placeholder="請選擇" size="mini" clearable >  <el-option v-for="item in filDatas" :key="item.BrandID" :label="item.BrandNames" :value="item.BrandNames" :value-key='item.BrandID'>  </el-option> </el-select> <!-- 搜索的列表 --> <div v-if="values!=='' && values!==null ">  <p class='ck-btn-box'>  <el-button size="mini" @click="ckAll">{{allck?'取消全選':'全選'}}</el-button>  </p>  <ul>  <li v-for="item in datas" :key="item.BrandID">   <span>AA{{item.BrandTypeName}}</span>   <span>BB{{item.BrandCName}}</span>   <span>CC{{item.BrandName}}</span>   <span>   <el-checkbox v-model="item.ck" @change="handItem(item)">{{item.BrandNames}}</el-checkbox>   </span>  </li>  </ul> </div> <!-- 默認列表 --> <ul v-else>  <li v-for="item in datas" :key="item.BrandID">  <span>AA{{item.BrandTypeName}}</span>  <span>BB{{item.BrandCName}}</span>  <span>CC{{item.BrandName}}</span>  <span>   <el-checkbox v-model="item.ck" @change="handItem(item)">{{item.BrandNames}}</el-checkbox>  </span>  </li> </ul> <p class='checked-box' v-if="this.arr.length>0">  已選：  <span @click="clearAll" class='clearll-txt'>清空</span>  <el-tag v-for="tag in this.arr" :key="tag.BrandID" closable @close="handleClose(tag)" :disable-transitions=true>  {{tag.BrandName}} / {{tag.BrandNames}}  </el-tag> </p> </div></template><script>export default { data() { return { allck: false, //控制全選 當沒有任何操作時每次默認為 true ckarr: [], //每次搜索出來點擊了復選框 arr: [], //點擊了input的數據 存放所有的已選 values: "", listItem:{ list: [  {  BrandTypeName: "大類1 建材/家居 ", //品牌正常  BrandTypeID: 1,  BrandCName: "中類1 建筑材料",  BrandCID: 1,  BrandName: "小類1 水泥",  BransID: 1,  BrandNames: "紅水泥",  BrandID: 1,  ck: false  },  {  BrandTypeName: "大類1 建材/家居 ", //品牌在多個小類里  BrandTypeID: 1,  BrandCName: "中類2 家私定制",  BrandCID: 2,  BrandName: "小類2 電飯煲",  BransID: 2,  BrandNames: "松下",  BrandID: 2,  ck: false  },  {  BrandTypeName: "大類1 建材/家居 ",  BrandTypeID: 1,  BrandCName: "中類2 家私定制",  BrandCID: 2,  BrandName: "小類3 電壓力鍋",  BransID: 3,  BrandNames: "松下",  BrandID: 3,  ck: false  },  {  BrandTypeName: "大類1 建材/家居 ", //品牌在多個中類小類里  BrandTypeID: 1,  BrandCName: "中類2 高檔家具",  BrandCID: 3,  BrandName: "小類2 家具類",  BransID: 4,  BrandNames: "品牌",  BrandID: 4,  ck: false  },  {  BrandTypeName: "大類1 建材/家居 ",  BrandTypeID: 1,  BrandCName: "中類2 豪華家具",  BrandCID: 4,  BrandName: "小類3 廚具類",  BransID: 5,  BrandNames: "品牌2",  BrandID: 5,  ck: false  },  {  BrandTypeName: "大類1 裝修/房產 ",  BrandTypeID: 2,  BrandCName: "中類2 豪華家具",  BrandCID: 5,  BrandName: "小類3 沙發類",  BransID: 6,  BrandNames: "品牌3",  BrandID: 6,  ck: false  } ] } }; }, computed: { datas(){ if(!this.values){ return this.listItem.list } //每次搜索的數據 if (this.values !== "") { return this.listItem.list.filter(item => {  return item.BrandNames.includes(this.values); }); }  }, filDatas() { //select下拉菜單去重 相同名字的子選項會存放在多個類別里 var obj = {}; return this.listItem.list.reduce(function(item, next) { obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next)); return item; }, []); } }, watch: { // 監聽每次搜索時的數據變化 datas: function(ary) { //搜索數據變化時 如果搜的結果全部是已選 第二次搜這個關鍵詞就變成 取消選擇 if (this.values !== "") { this.allck = false; //默認每次搜索時是全選狀態 需判斷之前是否全選中的 有的話就是取消全選  ary.every( item => { item.ck ? !this.allck : this.allck }); // 將當前搜索列表的已選拿出來 this.ckarr = this.datas.filter(item => {  if (item.ck) { return item; } }); } }, // 監聽每次搜索列表的數據是否全部為選中 判斷已選的數據是不是等于當前搜索列表的數據 ckarr: function() { if (this.values !== "") { this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已選等于當前搜索列表 改變全選狀態 } }, }, methods: { // 數據列表的復選框點擊 handItem(item) { if (item.ck) { this.arr.push(item); //arr是所有復選框的數據 存放在已選中 this.ckarr.push(item); //ckarr是每次搜索列表點了復選框的數據 當取消全選時 在已選的大數組中刪除 ckarr的數據 } else { this.arr.splice(this.arr.indexOf(item), 1); this.ckarr.splice(this.arr.indexOf(item), 1); } }, // 已選中的 單個刪除 handleClose(tag) { this.arr.splice(this.arr.indexOf(tag), 1); // 點哪刪哪 this.ckarr.forEach(items => { // 判斷刪除的是否是當前搜索列表的數據 是的話改變全選狀態 if (items.BrandID == tag.BrandID) {  this.ckarr.splice(this.ckarr.indexOf(tag), 1); } }); this.listItem.list.forEach(items => { // 刪除已選時改變數據列表狀態 if (items.BrandID == tag.BrandID) { items.ck = false; } }); }, // 清空操作 clearAll() { this.listItem.list.forEach(item => { item.ck = false; }); // 數據列表狀態恢復 this.arr = []; //已選全部清空  this.ckarr = [] // 當前搜索列表存放的已選全部清空 this.allck = false; //全選狀態恢復 this.values='' //回到默認數據  }, // 每次搜索列表的全選 ckAll() { this.allck = !this.allck; //點擊全選 變 取消選擇 let arrys = []; //存放復選框為取消狀態的數據 if (this.allck) { // 將當前搜索的列表數據追加到已選中 this.datas.forEach(item => {  item.ck = true;   if (!this.arr.includes(item)) { // 追加復選框為false的數據  this.arr.push(item);  this.ckarr.push(item);  } }); } else { this.datas.forEach(item => { item.ck = false; }); //當前搜索的數據列表復選框設為取消狀態 arrys = this.datas.filter(item => { return !item.ck; }); //把復選框為false的數據 拿出來 this.datas.forEach(items => { //已選那里刪除當前搜索列表復選框為false的數據  arrys.forEach(item => {  if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);}  }); }); this.ckarr = []; //當前搜索列表為復選框的數據清空 } }, }};</script><style scoped>.tpbox { background: #fff; padding: 30px; height: 500px;} ul { margin-top: 15px; } li { justify-content: space-around; display: flex; line-height: 50px; color: #666; border-bottom: 1px solid #eee; } span { flex: 1; text-align: left; padding-left: 10px; } .checked-box { margin-top: 20px;  } .el-tag { margin-left: 10px; } .clearll-txt { color: red; cursor: pointer; } .ck-btn-box { margin-top: 30px; }</style>