這篇文章主要介紹了vue如何實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為本溪等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及本溪網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、本溪網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

npm i element-ui -S


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

demo功能概覽

• 默認(rèn)沒有全選，搜索時支持全選與取消全選，

• 將選擇的數(shù)據(jù)添加到已選中，已選刪除時改變當(dāng)前搜索列表的狀態(tài)與全選按鈕的狀態(tài)

• 全選時全部追加到已選，取消全選時從已選中刪除當(dāng)前搜索的列表

功能列表

1、搜索時展示相應(yīng)的數(shù)據(jù)列表，支持全選與取消全選，（默認(rèn)展示所有數(shù)據(jù)時不支持全選）

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

2、搜索的下拉菜單去重

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

3、當(dāng)前界面全選時添加到已選中，當(dāng)前界面取消全選時，從已選的數(shù)據(jù)刪除當(dāng)前搜索出來的列表數(shù)據(jù)，

// 每次搜索列表的全選 與 取消全選
 ckAll() {
 this.allck = !this.allck; //點(diǎn)擊全選 變 取消選擇
 let arrys = []; //存放復(fù)選框?yàn)槿∠麪顟B(tài)的數(shù)據(jù)
 if (this.allck) { // 將當(dāng)前搜索的列表數(shù)據(jù)追加到已選中
 this.datas.forEach(item => {
  item.ck = true; 
  if (!this.arr.includes(item)) { // 追加復(fù)選框?yàn)閒alse的數(shù)據(jù)
  this.arr.push(item);
  this.ckarr.push(item);
  }
 });
 } else {
 this.datas.forEach(item => { item.ck = false; }); //當(dāng)前搜索的數(shù)據(jù)列表復(fù)選框設(shè)為取消狀態(tài)
 arrys = this.datas.filter(item => { return !item.ck; }); //把復(fù)選框?yàn)閒alse的數(shù)據(jù) 拿出來
 this.datas.forEach(items => { //已選那里刪除當(dāng)前搜索列表復(fù)選框?yàn)閒alse的數(shù)據(jù)
  arrys.forEach(item => {
  if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);}
  });
 });
 this.ckarr = []; //當(dāng)前搜索列表為復(fù)選框的數(shù)據(jù)清空
 }
 },

4、列表選中時添加到已選，全部選中時改變?nèi)x狀態(tài)(變?nèi)∠x)

// 監(jiān)聽當(dāng)前搜索列表的勾選數(shù)據(jù)
 ckarr: function() {
 if (this.value !== "") {
 this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已選等于當(dāng)前搜索列表 改變?nèi)x狀態(tài)
 }
 }

5、在已選中操作刪除時，如果刪除的是當(dāng)前搜索的列表,當(dāng)前全選改變狀態(tài)，如果刪除的非當(dāng)前搜索列表，當(dāng)前全選狀態(tài)不變(這里有點(diǎn)繞)

handleClose(tag) {
 this.arr.splice(this.arr.indexOf(tag), 1); // 點(diǎn)哪刪哪
 this.ckarr.forEach(items => { // 判斷刪除的是否是當(dāng)前搜索列表的數(shù)據(jù) 是的話改變?nèi)x狀態(tài)
 if (items.BrandID == tag.BrandID) {
  this.ckarr.splice(this.ckarr.indexOf(tag), 1);
 }
 });
 this.listItem.list.forEach(items => { // 刪除已選時改變數(shù)據(jù)列表狀態(tài)
 if (items.BrandID == tag.BrandID) { items.ck = false; }
 });
 },

app.vue

<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>
 <!-- 默認(rèn)列表 -->
 <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, //控制全選 當(dāng)沒有任何操作時每次默認(rèn)為 true
 ckarr: [], //每次搜索出來點(diǎn)擊了復(fù)選框
 arr: [], //點(diǎn)擊了input的數(shù)據(jù) 存放所有的已選
 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 裝修/房產(chǎn) ",
  BrandTypeID: 2,
  BrandCName: "中類2 豪華家具",
  BrandCID: 5,
  BrandName: "小類3 沙發(fā)類",
  BransID: 6,
  BrandNames: "品牌3",
  BrandID: 6,
  ck: false
  }
 ]
 }
 };
 },
 computed: {
 datas(){
 if(!this.values){
 return this.listItem.list
 }
 //每次搜索的數(shù)據(jù)
 if (this.values !== "") {
 return this.listItem.list.filter(item => {
  return item.BrandNames.includes(this.values);
 });
 } 
 },
 filDatas() {
 //select下拉菜單去重 相同名字的子選項(xiàng)會存放在多個類別里
 var obj = {};
 return this.listItem.list.reduce(function(item, next) {
 obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next));
 return item;
 }, []);
 }
 },
 watch: {
 // 監(jiān)聽每次搜索時的數(shù)據(jù)變化
 datas: function(ary) {
 //搜索數(shù)據(jù)變化時 如果搜的結(jié)果全部是已選 第二次搜這個關(guān)鍵詞就變成 取消選擇
 if (this.values !== "") {
 this.allck = false; //默認(rèn)每次搜索時是全選狀態(tài) 需判斷之前是否全選中的 有的話就是取消全選
  ary.every( item => { item.ck ? !this.allck : this.allck });
 // 將當(dāng)前搜索列表的已選拿出來
 this.ckarr = this.datas.filter(item => {
  if (item.ck) { return item; }
 });
 }
 },
 // 監(jiān)聽每次搜索列表的數(shù)據(jù)是否全部為選中 判斷已選的數(shù)據(jù)是不是等于當(dāng)前搜索列表的數(shù)據(jù)
 ckarr: function() {
 if (this.values !== "") {
 this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已選等于當(dāng)前搜索列表 改變?nèi)x狀態(tài)
 }
 },

 },
 methods: {
 // 數(shù)據(jù)列表的復(fù)選框點(diǎn)擊
 handItem(item) {
 if (item.ck) {
 this.arr.push(item); //arr是所有復(fù)選框的數(shù)據(jù) 存放在已選中
 this.ckarr.push(item); //ckarr是每次搜索列表點(diǎn)了復(fù)選框的數(shù)據(jù) 當(dāng)取消全選時 在已選的大數(shù)組中刪除 ckarr的數(shù)據(jù)
 } 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); // 點(diǎn)哪刪哪
 this.ckarr.forEach(items => { // 判斷刪除的是否是當(dāng)前搜索列表的數(shù)據(jù) 是的話改變?nèi)x狀態(tài)
 if (items.BrandID == tag.BrandID) {
  this.ckarr.splice(this.ckarr.indexOf(tag), 1);
 }
 });
 this.listItem.list.forEach(items => { // 刪除已選時改變數(shù)據(jù)列表狀態(tài)
 if (items.BrandID == tag.BrandID) { items.ck = false; }
 });
 },
 // 清空操作
 clearAll() {
 this.listItem.list.forEach(item => { item.ck = false; }); // 數(shù)據(jù)列表狀態(tài)恢復(fù)
 this.arr = []; //已選全部清空 
 this.ckarr = [] // 當(dāng)前搜索列表存放的已選全部清空
 this.allck = false; //全選狀態(tài)恢復(fù)
 this.values='' //回到默認(rèn)數(shù)據(jù) 
 },
 // 每次搜索列表的全選
 ckAll() {
 this.allck = !this.allck; //點(diǎn)擊全選 變 取消選擇
 let arrys = []; //存放復(fù)選框?yàn)槿∠麪顟B(tài)的數(shù)據(jù)
 if (this.allck) { // 將當(dāng)前搜索的列表數(shù)據(jù)追加到已選中
 this.datas.forEach(item => {
  item.ck = true; 
  if (!this.arr.includes(item)) { // 追加復(fù)選框?yàn)閒alse的數(shù)據(jù)
  this.arr.push(item);
  this.ckarr.push(item);
  }
 });
 } else {
 this.datas.forEach(item => { item.ck = false; }); //當(dāng)前搜索的數(shù)據(jù)列表復(fù)選框設(shè)為取消狀態(tài)
 arrys = this.datas.filter(item => { return !item.ck; }); //把復(fù)選框?yàn)閒alse的數(shù)據(jù) 拿出來
 this.datas.forEach(items => { //已選那里刪除當(dāng)前搜索列表復(fù)選框?yàn)閒alse的數(shù)據(jù)
  arrys.forEach(item => {
  if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);}
  });
 });
 this.ckarr = []; //當(dāng)前搜索列表為復(fù)選框的數(shù)據(jù)清空
 }
 },
 }
};
</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>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前名稱：vue如何實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://www.rwnh.cn/article6/copeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、App設(shè)計(jì)、域名注冊、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)