为什么写这个呢?两个原因,一个是自己用到了,另一个是压根没人写,我不知道是太简单了懒得写还是很多人都忘记了,不过我看网上找demo的还挺多的,而且天下文章一般抄,都不对还在那不停的抄,我也是醉了,没一点办法,罢了罢了,自己写吧
官方全选DEMO 全选这里就不实现了,很简单,官方给的有,实现反选 这里使用的还是官方的demo,只是添加了一个反选的函数,所以使用的时候先看官方demo源码
<el-checkbox :indeterminate="isIndeterminate" v-model="Reverseflg" @change="Reverse">反选</el-checkbox>
//反选
Reverse(){
//记录当前被选中的值给一个空数组
let idx;//记录当前是不是存在这个值
let currArr = []; //记录当前的选择的数组
for(let item of this.cities){
idx = this.checkedCities.includes(item) //如果不存在当前的值就将该值放到最新的空数组里
if(!idx){
currArr.push(item)
}
}
this.checkedCities = currArr
}
这个DEMO是我看的这篇文章,根据自己的需求改了一下,感谢这位同志的文章。 原文链接
<template>
<div>
<!-- <label class="labelname">{{labelname}}</label> -->
<div class="inputbox">
<div class="arrbox">
<div v-for="(item,index) in labelarr" :key="index" class="spanbox">
<span>{{item}}</span>
<i class="spanclose" @click="removeitem(index,item)"></i>
</div>
<input placeholder="敲击空格多条输入" size="5" v-model="currentval" @keyup.space="addlabel" class="input" type="text" />
</div>
</div>
<code>{{labelarr.join(",")}}</code>
<!-- 常用label展示 -->
<div></div>
</div>
</template>
<script>
export default {
name: 'enterlabel',
props: {
parentarr: {
type: Array,
default () {
return []
}
}
},
data() {
return {
currentval: '',
labelarr: []
}
},
watch: {
labelarr(old, cur) {
this.$emit('on-change', this.labelarr)
},
parentarr() {
if (this.parentarr.length > 0) {
this.labelarr = []
for (let i = 0; i < this.parentarr.length; i++) {
this.labelarr.push(this.parentarr[i])
}
} else {
this.labelarr = []
}
}
},
methods: {
// 移除标签
removeitem(index, item) {
this.labelarr.splice(index, 1)
},
// input回车加入labelarr中
addlabel() {
let count = this.labelarr.indexOf(this.currentval)
if (count === -1) {
this.labelarr.push(this.currentval)
}
this.currentval = ''
}
}
}
</script>
<style>
.inputbox {
background-color: white;
font-size: 12px;
border: 1px solid #dcdee2;
border-radius: 6px;
margin-bottom: 18px;
padding: 6px 1px 1px 6px;
text-align: left;
font-size: 0;
margin-bottom: 0;
}
.input {
font-size: 14px;
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
min-width: 80px;
vertical-align: top;
height: 30px;
color: #34495e;
margin: 2px;
line-height: 30px;
}
.arrbox {
border-radius: 6px;
margin-bottom: 10px;
padding: 6px 1px 1px 6px;
text-align: left;
font-size: 0;
}
.spanbox {
line-height: 30px;
margin: 2px;
padding: 0 10px;
background-color: #1abc9c;
color: white;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
overflow: hidden;
transition: 0.25s linear;
}
.spanbox:hover {
padding: 0px 17px 0 3px;
}
.spanclose {
color: white;
padding: 0 10px 0 0;
cursor: pointer;
font-size: 12px;
position: absolute;
right: -3px;
text-align: right;
text-decoration: none;
top: 0;
width: 100%;
bottom: 0;
z-index: 2;
opacity: 0;
filter: "alpha(opacity=0)";
transition: opacity 0.25s linear;
font-style: normal;
}
.spanbox:hover .spanclose {
padding: 0 10px 5px 0;
opacity: 1;
-webkit-filter: none;
filter: none;
}
.spanclose:after {
content: "x";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 27px;
}
</style>