这篇文章主要介绍了vue如何实现搜索的结果页面支持全选与取消全选功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
npm i element-ui -S
// main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
demo功能概览
默认没有全选，搜索时支持全选与取消全选，
将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态
全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表
功能列表
1、搜索时展示相应的数据列表，支持全选与取消全选，（默认展示所有数据时不支持全选）
datas() {
// 每次搜索的数据 根据下拉菜单的值的变化
if (this.value !== "") {
return this.listItem.list.filter(item => {
return item.BrandNames.includes(this.value);
});
} else {
return this.listItem.list; // 没有搜索的关键词时展示全部数据
}
},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、当前界面全选时添加到已选中，当前界面取消全选时，从已选的数据删除当前搜索出来的列表数据，
// 每次搜索列表的全选 与 取消全选
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 = []; //当前搜索列表为复选框的数据清空
}
},4、列表选中时添加到已选，全部选中时改变全选状态(变取消全选)
// 监听当前搜索列表的勾选数据
ckarr: function() {
if (this.value !== "") {
this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已选等于当前搜索列表 改变全选状态
}
}5、在已选中操作删除时，如果删除的是当前搜索的列表,当前全选改变状态，如果删除的非当前搜索列表，当前全选状态不变(这里有点绕)
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; }
});
},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>
<!-- 默认列表 -->
<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>Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
感谢你能够认真阅读完这篇文章，希望小编分享的“vue如何实现搜索的结果页面支持全选与取消全选功能”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
