前端自己实现下拉框以及列表查询（去重）

在我们做项目的时候，可能有时候会遇到这么一个需求。

1.点击一个弹框弹出一堆列表，然后把选中的数据显示到页面列表上面，页面列表上有一些查询条件以及查询按钮，这个时候如果后端不给你返回这些查询条件以及查询数据，那么就需要前端自己去写这个功能！

再不需要后端的情况下前端实现下拉框数据以及从查询功能：

效果图：

代码：（复制粘贴）

一、涉及功能点：

1.从弹框添加到页面时候的去重功能；

1.页面列表筛选拉下款赋值去重功能；

2.查询列表数据筛选功能；

<template><div class><div class="" style="display: block"><div class=""><div><div class="" style="marginTop: 100px;marginLeft: 100px"><el-button type="primary" size="mini" @click="addboccmesg">点击弹框</el-button><el-row :gutter="20"><el-col :span="24"><div class="sample" style="width: 100%"><div class></div><div style="display: flex;align-items: center;marginTop: 20px"><div></div></div></div></el-col></el-row></div></div></div></div><div class="box-card" v-show="showTable"><div class="boxSearch"><div></div><div class="boxSerachRight"><el-col :span="22"><div style="display:flex;align-items: center"><div class="beyondBox3"><el-select v-model="queryNameValue" placeholder="姓名" clearable><el-option v-for="item in queryNameOptions" :key="item" :label="item" :value="item"></el-option></el-select></div><div class="beyondBox3"><el-select v-model="provinceValue" placeholder="省份" clearable><el-optionv-for="item in provinceOptions":key="item":label="item":value="item"></el-option></el-select></div><div class="beyondBox3"><el-select v-model="cityValue" placeholder="市区" clearable><el-option v-for="item in cityOptions" :key="item" :label="item" :value="item"></el-option></el-select></div><el-button type="primary" size="mini" @click="getScreen">查询</el-button><el-button type="primary" size="mini" @click="getReset">重置</el-button></div></el-col></div></div><el-tableref="multipleTable":data="infoData"borderstyle="width: 100%;marginTop: 20px;":header-cell-style="{color: '#000000', fontWeight: 'normal',textAlign: 'center'}"><el-table-column fixed prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></div><el-dialog :visible.sync="infoVisible" title="选中数据添加到页面显示" width="80%"><el-form:inline="true"label-position="right"label-width="60px"class="demo-form-inline"><el-table:data="infoDatas"borderfitstyle="width: 100%"@selection-change="addHandleSelections":header-cell-style="{color: '#000000', fontWeight: 'normal',textAlign: 'center'}"><el-table-column type="selection" width="55" /><el-table-column fixed prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></el-form><span slot="footer" class="dialog-footer"><el-button @click="addSure" type="primary" size="mini">确定</el-button><el-button @click="infoVisible = false" type="primary" size="mini">关闭</el-button></span></el-dialog></div></template><script>export default {data() {return {// 页面表格隐藏showTable: false,// 姓名queryNameOptions: [],queryNameValue: "",// 省份provinceOptions: [],provinceValue: "",// 城市cityOptions: [],cityValue: "",infoVisible: false,// 弹框空数组addHandleSelectionData: [],// 页面列表datainfoData: [],// 弹框列表datainfoDatas: [{id: 1,date: "-05-03",name: "赵一毛",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 33},{id: 2,date: "-05-02",name: "钱二毛",province: "北京",city: "朝阳区",address: "北京市朝阳区金沙江路 1518 弄",zip: 33},{id: 3,date: "-05-04",name: "孙三毛",province: "广州",city: "广州区",address: "广州市广州区金沙江路 1518 弄",zip: 33},{id: 4,date: "-05-01",name: "李四毛",province: "深圳",city: "光明区",address: "深圳市光明区金沙江路 1518 弄",zip: 33},{id: 5,date: "-05-08",name: "周五毛",province: "天津",city: "和平区",address: "天津市和平区金沙江路 1518 弄",zip: 33},{id: 6,date: "-05-06",name: "吴六毛",province: "南京市",city: "江宁区",address: "南京市江宁区区金沙江路 1518 弄",zip: 33},{id: 7,date: "-05-07",name: "王七毛",province: "太原",city: "迎泽区",address: "太原市迎泽区金沙江路 1518 弄",zip: 33},{id: 8,date: "-05-07",name: "王七毛",province: "太原",city: "小店区",address: "太原市小店区金沙江路 1518 弄",zip: 33}],// 空dataallData: []};},methods: {// 点击弹框addboccmesg() {// 展示列表弹框this.infoVisible = true;},// 查询getScreen() {// 查询时候操作空数组this.infoData = this.allData;let arr = [];if (this.queryNameValue || this.provinceValue || this.cityValue) {this.infoData.map(item => {if (item.name.includes(this.queryNameValue) &&item.province.includes(this.provinceValue) &&item.city.includes(this.cityValue)) {arr.push(item);}});this.infoData = arr;}},// 重置getReset() {// 重置下拉框清空this.queryNameValue = "";this.provinceValue = "";this.cityValue = "";// 重置之后默认执行一遍查询this.getScreen();},// 添加多选addHandleSelections(val) {// 选中塞到一个数组里this.addHandleSelectionData = val;},// 添加确定addSure() {// 添加到列表数组时候去重// 添加到列表数组的时候先判断这个数组里有没有重复的值，如果没有就循环该数组把选中的值塞到数组列表里面if (this.addHandleSelectionData.length !== 0) {this.addHandleSelectionData.map(item => {let newobj = this.infoData.filter(v => v.id == item.id);if (newobj.length == 0) {// 列表数组this.infoData.push(item);// 空数组再赋值一遍this.allData.push(item);}});// 下拉框去重// 给姓名、省份、市区定义空数组，以便去重let newNameArr = [];let newProvinceArr = [];let newCityArr = [];// 循环列表数组// 找到列表数组中姓名、省份、市区的数组去重后赋值到下拉框里面this.infoData.map(item => {// 姓名newNameArr.push(item.name);let newNameArrs = newNameArr.filter((item, index, array) => {return array.indexOf(item) === index;});this.queryNameOptions = newNameArrs;// 省份newProvinceArr.push(item.province);let newProvinceArrs = newProvinceArr.filter((item, index, array) => {return array.indexOf(item) === index;});this.provinceOptions = newProvinceArrs;// 市区newCityArr.push(item.city);let newCityArrs = newCityArr.filter((item, index, array) => {return array.indexOf(item) === index;});this.cityOptions = newCityArrs;});// 添加成功后的回显this.$message.success("添加成功！");// 赋值成功后显示列表再页面this.showTable = true;// 关闭弹框this.infoVisible = false;} else {this.$message.warning("请选择要添加的数据！");}}},};</script>