当前位置: 首页 > article >正文

vue2中,下拉框多选和全选的实现

vue2中,下拉框多选和全选的实现

  • 代码布局
    • 在methods: 中添加功能函数
    • 较为完整的一个整体代码:

在这里插入图片描述
如图所示点击全选即可完成下拉框中全部子项的全部的选中,同时取消全选即可全部取消选择。

代码布局

  <div class="chos-box2">
              <span>屏蔽策略名称</span><el-select
                v-model="cluster_nameArr"
                filterable
                size="small"
                multiple
                placeholder="多选(可全选)"
                collapse-tags="collapseTags"
                clearable
                @change="searchDataHA"
              >
                <el-option
                  label="全选"
                  value="全选"
                  @click.native="selectAllHA"
                  v-if="options4.length"
                ></el-option>
                <el-option
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>

相关的el参数可以查询,

在methods: 中添加功能函数

method:{
 searchDataHA(val) {
      if (!val.includes("全选") && val.length === this.options4.length) {
        this.cluster_nameArr.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options4.length
      ) {
        this.cluster_nameArr = this.cluster_nameArr.filter((item) => {
          return item !== "全选";
        });
      }


      this.page = 1;
      this.getConfigData();//用来请求数据的函数
    },
    }

较为完整的一个整体代码:

<template>
<div class="chos-box2">
              <span>屏蔽策略名称</span><el-select
                v-model="cluster_nameArr"
                filterable
                size="small"
                multiple
                placeholder="多选(可全选)"
                collapse-tags="collapseTags"
                clearable
                @change="searchDataHA"
              >
                <el-option
                  label="全选"
                  value="全选"
                  @click.native="selectAllHA"
                  v-if="options4.length"
                ></el-option>
                <el-option
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            </template>
            <script>
 export default {
  data() {
  // 已选中选项
      mulSelecteds: {
        type: Array,
        default() {
          return [];
        },
      },
      collapseTags: {
        type: Boolean,
        default: true,
      },}
      method:{
 searchDataHA(val) {
      if (!val.includes("全选") && val.length === this.options4.length) {
        this.cluster_nameArr.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options4.length
      ) {
        this.cluster_nameArr = this.cluster_nameArr.filter((item) => {
          return item !== "全选";
        });
      }
      this.page = 1;
      this.getConfigData();//用来请求数据的函数
    },
     selectAllHA() {
      if (this.cluster_nameArr.length < this.options4.length) {
        this.cluster_nameArr = [];
        this.options4.map((item) => {
          this.cluster_nameArr.push(item);
        });
        this.cluster_nameArr.unshift("全选");
      } else {
        // 取消全选
        this.cluster_nameArr = [];
      }
      console.log("全选", this.checked, this.options2, this.selectedArr);
    },},
    

     watch: {//用来监听变量
    mulSelecteds: {
      handler(newVal, oldVal) {
        this.selectedArr = newVal;
        if (
          !this.selectedArr.includes("全选") &&
          this.selectedArr.length &&
          this.selectedArr.length === this.options2.length
        ) {
          this.selectedArr.unshift("全选");
        }
      },

      immediate: true,
    },
  },
      }

</script>
<style lang="scss" scoped>
  .chos-box2 {
            margin-right: 25px;
            span {
              display: inline-block;
              width: 115px;
            }
          }
</style>

}


http://www.kler.cn/a/103713.html

相关文章:

  • html5语义化标签
  • AI基础软件:如何自主构建大+小模型?
  • 启动两个线程,用另一个线程以通知的终止另一个线程
  • 云原生Docker Cgroups资源控制操作
  • 【多线程】Java如何实现多线程?如何保证线程安全?如何自定义线程池?
  • Matlab读写操作
  • 面试题之在async await中如何捕获到reject的Promise?
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • BadNets:基于数据投毒的模型后门攻击代码(Pytorch)以MNIST为例
  • 封装一个vue3 Toast组件,支持组件和api调用
  • 北京等保测评:携手守护网络安全!
  • 【模式识别】贝叶斯决策模型理论总结
  • 图像语义分割 pytorch复现DeepLab v1图像分割网络以及网络详解(骨干网络基于VGG16)
  • CSS设置超出范围滚动条和滚动条样式
  • 14、Python -- 列表推导式(for表达式)与控制循环
  • Docker操作总结
  • crossover23.6闪亮登场发布啦,2023最新功能解析
  • 脏牛提权 liunx
  • 在k8s中 ,数据包是怎么从外部流转进入到pod的?
  • 电子管是什么?