码迷,mamicode.com
首页 > 其他好文 > 详细

vue的el-select标签全选(转)

时间:2019-07-07 17:40:50      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:for   rdbms   app   min   tags   put   v-model   数据   select标签   

<el-select class="fr" v-model="searchJobType" style="width: 185px; margin-right:8px;" size="mini" type="text" multiple collapse-tags @change="changeSelect" placeholder="请选择类型查询">
    <el-option v-for="(type,ind) in typeList" :key=ind :label="type.label" :value="type.value"></el-option>
  </el-select>

var Main = {
    data() {
      return {
        searchJobType: [ALL_SELECT,TSINPUT, 01, 02, 03, 04, 05, 07, 08, 09, 11, 12],
        oldSearchJobType: [],
        typeList: [
          {value: ALL_SELECT, label: 全部},
          {value: TSINPUT, label: 时序数据采集任务},
          {value: 01, label: RDBMS → HIVE全量},
          {value: 02, label: RDBMS → HDFS全量},
          {value: 03, label: RDBMS → HBASE全量},
          {value: 04, label: HDFS → RDBMS},
          {value: 05, label: HIVE  → RDBMS},
          {value: 07, label: RDBMS → HIVE增量},
          {value: 08, label: RDBMS → HBASE增量},
          {value: 09, label: 文件 → RDBMS},
          {value: 11, label: 数据对象 → 数据对象},
          {value: 12, label: FTP服务器 → 文件系统},
        ]
      }
    },
    methods:{
        changeSelect(val) {
        const allValues = [];
        // 保留所有值
        for (const item of this.typeList) {
          allValues.push(item.value)
        }
        // 用来储存上一次的值,可以进行对比
        const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
        // 若是全部选择
        if (val.includes(ALL_SELECT)) this.searchJobType = allValues;
        // 取消全部选中 上次有 当前没有 表示取消全选
        if (oldVal.includes(ALL_SELECT) && !val.includes(ALL_SELECT)) this.searchJobType = [];
        // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
        // 新老数据都有全部选中
        if (oldVal.includes(ALL_SELECT) && val.includes(ALL_SELECT)) {
          const index = val.indexOf(ALL_SELECT);
          val.splice(index, 1); // 排除全选选项
          this.searchJobType = val
        }
        // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
        if (!oldVal.includes(ALL_SELECT) && !val.includes(ALL_SELECT)) {
          if (val.length === allValues.length - 1) this.searchJobType = [ALL_SELECT].concat(val)
        }
        // 储存当前最后的结果 作为下次的老数据
        this.oldSearchJobType[0] = this.searchJobType;
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount(#app)

原文链接:https://www.cnblogs.com/zhenggaowei/p/9828364.html

vue的el-select标签全选(转)

标签:for   rdbms   app   min   tags   put   v-model   数据   select标签   

原文地址:https://www.cnblogs.com/qcq0703/p/11146796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!