elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割

写在前面

为什么写这个呢?两个原因,一个是自己用到了,另一个是压根没人写,我不知道是太简单了懒得写还是很多人都忘记了,不过我看网上找demo的还挺多的,而且天下文章一般抄,都不对还在那不停的抄,我也是醉了,没一点办法,罢了罢了,自己写吧

官方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
      }

input 输入空格使用label分割

这个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>

OVER

  • 一个在web摸爬滚打3年仍然一无所获的老男人
何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值