可以实现全选,反选,正选,下拉框可以实现搜索
直接上图:
①全选
②反选
③选中
<el-form-item label="国家/地区:">
<div class="clOaTanBao">
<div v-if="showFan" class="cl2">排除:</div>
<div v-if="showRel" class="cl2">选中:</div>
<div class="baoJaCl" :title="natStrDt" @click="cliDivFunc">
<el-input @focus="inptFocusFunc" @blur="inptOutFunc" v-model="natStrDt" class="clshowOa" placeholder="全部" />
<span class="clJaXia" v-show="!natTanShow">
<i class="el-icon-arrow-down"></i>
</span>
<span class="clJaXia" v-show="natTanShow">
<i class="el-icon-arrow-up"></i>
</span>
</div>
<div class="clTan" v-show="natTanShow">
<div :tabIndex="1" @focus="textFocusFunc2" @blur="textOutFunc2" class="ciDaCl">
<el-input @input="queryNatFunc" @focus="textFocusFunc1" @blur="textOutFunc1" v-model="piNatDt" />
<div class="xunBigCl">
<div v-for="city in ccListArr" :key="city.mccid">
<div @click="selNatFunc(city.mccid)" v-bind:class='{bg:selIdArr.includes(city.mccid, 0)}'>
<span>{{city.name}}</span>
<span class="rigSpCl" v-show="selIdArr.includes(city.mccid, 0)">
<i class="el-icon-check"></i>
</span>
</div>
</div>
</div>
</div>
<div class="cl3">
<MwButton @click="selAllFunc">全选</MwButton>
<MwButton @click="selFanFunc" class="clBtnHou">反选</MwButton>
<MwButton @click="selRelFunc" class="clBtnHou">选中项</MwButton>
</div>
</div>
</div>
</el-form-item>
</template>
<script>
export default {
name: 'mw-cc-mulselect',
props: {
phoneNum: {
type: Boolean,
default: true,
},
//绑定值
bindKey: {
type: String,
default: '',
},
},
data() {
return {
selIdArr: [],
isactive: "",
showRel: false,
showFan: false,
natTanShow: false,
divAreJu: false,
ipt2AreJu: false,
natStrDt: "",
piNatDt: "",
ccListArr: [
{
mccid: "1",
name: "中国"
},
{
mccid: "2",
name: "韩国"
},
{
mccid: "3",
name: "日本"
},
{
mccid: "4",
name: "俄罗斯"
},
{
mccid: "5",
name: "美国"
}
],
ccListAllArr: [],
numFlag: 0
}
},
created() {
this.ccListAllArr = this.$cloneDeep(this.ccListArr);
},
watch: {
"$store.getters.getMulNatStat": {
handler(newName, oldName) {
if (newName == "false") {
this.natTanShow = false;
this.numFlag = 0;
}
},
immediate: true,
},
},
methods: {
cliDivFunc() {
this.numFlag = this.numFlag + 1;
if (this.numFlag==1) {
this.natTanShow = true;
}
if (this.numFlag==2) {
this.natTanShow = false;
this.numFlag = 0;
}
},
selNatFunc(prmsDt) {
if (!this.selIdArr.includes(prmsDt, 0)) {
this.selIdArr.push(prmsDt);
} else {
for (let i=0; i<this.selIdArr.length; i++) {
if (prmsDt == this.selIdArr[i]) {
this.selIdArr.splice(i, 1);
break;
}
}
}
},
//搜索国家地区
queryNatFunc() {
this.ccListArr = this.ccListAllArr.filter((item, index, arr) => {
return item.name.indexOf(this.piNatDt) > -1;
})
},
//国家地区聚焦
inptFocusFunc() {
this.natTanShow = true;
this.piNatDt = "";
this.$store.commit('zidstore/SETMUL_OACLOSE', "false");
this.queryNatFunc();
},
//国家地区失焦
inptOutFunc() {
setTimeout(() => {
if (this.divAreJu || this.ipt2AreJu) {
} else {
this.natTanShow = false;
this.numFlag = 0;
}
}, 200);
setTimeout(() => {
this.divAreJu = false;
this.ipt2AreJu = false;
}, 250);
},
//输入框2聚焦
textFocusFunc1() {
this.ipt2AreJu = true;
},
//输入框2失焦
textOutFunc1() {
setTimeout(() => {
if (this.divAreJu) {
} else {
this.natTanShow = false;
this.numFlag = 0;
}
}, 200);
},
//选国家div聚焦
textFocusFunc2() {
this.divAreJu = true;
},
//选国家div失焦
textOutFunc2() {
setTimeout(() => {
if (this.ipt2AreJu) {
} else {
this.natTanShow = false;
this.numFlag = 0;
}
}, 200);
},
testFunc2() {
},
//全选
selAllFunc() {
this.showRel = false;
this.showFan = false;
this.natTanShow = false;
this.numFlag = 0;
this.selIdArr = [];
this.natStrDt = "";
this.$emit('chageFlag', "AllFlag");
this.$store.commit('zidstore/SETMUL_OACLOSE', "");
},
//反选
selFanFunc() {
if (this.selIdArr.length == 0) {
this.$message({
type: "warning",
message: "请先选择",
});
} else {
this.showRel = false;
this.showFan = true;
this.natTanShow = false;
this.numFlag = 0;
this.natComFunc();
this.$emit('chageFlag', "fanFlag");
this.$store.commit('zidstore/SETMUL_OACLOSE', "");
}
},
//选中
selRelFunc() {
if (this.selIdArr.length == 0) {
this.$message({
type: "warning",
message: "请先选择",
});
} else {
this.showRel = true;
this.showFan = false;
this.natTanShow = false;
this.numFlag = 0;
this.natComFunc();
this.$emit('chageFlag', "RelFlag");
this.$store.commit('zidstore/SETMUL_OACLOSE', "");
}
},
//国家地区选中公共
natComFunc() {
let temArr1 = [];
for (let i = 0; i < this.selIdArr.length; i++) {
for (let j = 0; j < this.ccListArr.length; j++) {
if (this.selIdArr[i] == this.ccListArr[j].mccid) {
temArr1.push(this.ccListArr[j].name);
}
}
}
this.natStrDt = "";
for (let i = 0; i < temArr1.length; i++) {
this.natStrDt = this.natStrDt + ";" + temArr1[i];
}
this.natStrDt = this.natStrDt.substring(1);
},
}
}
</script>
<style lang="scss" scoped>
.baoJaCl {
/deep/.el-input__inner {
cursor: pointer;
padding-right: 30px;
}
}
.clJaXia {
position: absolute;
right: 10px;
color: #C0C4CC;
}
.xunBigCl {
cursor: pointer;
max-height: 250px;
overflow-y: auto;
}
.ciDaCl {
padding: 0 20px;
}
.rigSpCl {
float: right;
}
.bg {
color: #409eff;
}
.clOaTanBao {
.clshowOa {
/deep/.el-input__inner {
padding-left: 35px;
}
}
}
.cl2 {
position: absolute;
z-index: 9999;
}
.cl3 {
position: absolute;
width: 235px;
background: #fff;
.clBtnHou {
margin-left: 26px;
}
}
.clTan {
position: fixed;
z-index: 999;
width: 235px;
margin-top: 5px;
background: #fff;
.el-checkbox {
display: block;
}
.el-checkbox-group {
max-height: 250px;
overflow-y: scroll;
}
}
</style>
洽西游戏网