element-plus 下拉框实现全选的示例代码

目录
  • 前言
  • 下拉框的简单使用
  • 全选互斥
    • 下拉框多选
    • 全选互斥的实现
  • 多个下拉框互斥
  • 一般全选的实现

前言

实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了。

下拉框的简单使用

使用方法还是比较简单的

<el-select v-model="user.name" placeholder="请选择">
    <el-option v-for="item in nameList" :key="item" :label="item" :value="item">
    </el-option>
  </el-select>

首先需要使用到 el-select el-option el-select就是下拉框,所以需要使用 v-model双向绑定数据。而 el-option就是下拉框的选项。

import { reactive, toRefs } from "vue";

const state = reactive({
  nameList: ["clz", "czh", "ccc"],
  user: {
    name: "",
  },
});

const { nameList, user } = toRefs(state);

全选互斥

需求:下拉框选项中有全选以及其他项,需要实现点击全选后不能选择其他项,选中了其他项同样不能选择全选。

下拉框多选

先来简单了解下下拉框的多选。

理论上来说,是只需要给 el-select添加上 multiple就能实现多选,但是效果不太好。选中的会挤在一起。

这个时候,我们可以添加 collapse-tags属性,这样子,这样子就只会显示一个选项,没显示的以数量的形式在后面。

再添加 collapse-tags-tooltip属性,还能实现,悬浮在 +X上方时,显示全部选中的选项。

代码:

<el-select
  v-model="form.ages"
  placeholder="请选择"
  multiple
  collapse-tags
  collapse-tags-tooltip
>
  <el-option
    v-for="item in ageList"
    :key="item"
    :label="item"
    :value="item"
  ></el-option>
</el-select>
import { reactive, toRefs } from "vue";

const state = reactive({
  ageList: ["全部", 19, 20, 21, 22],
  form: {
    ages: [],
  },
});

const { ageList, form } = toRefs(state);

全选互斥的实现

这个主要就是依靠 disabled属性来实现,只不过属性值变成一个返回 boolean值的函数了。

  <el-select
    v-model="form.ages"
    placeholder="请选择"
    multiple
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="item in ageList"
      :key="item"
      :label="item"
      :value="item"
      :disabled="checkAge"
    ></el-option>
  </el-select>
const checkAge = () => {
  return true;
};

可以看到,当绑定的 checkAge返回 true的时候,全部选项都不能选了。

明白原理后,我们便只需要理清思路就行了。

首先,我们绑定的 checkAge应该要把选中项( item)作为参数传给 checkAge,这样子才能得到选中的项。

接着,就是思路了。我们禁选的情况就两种:

  • 选择了全部,此时禁选非全部的选项
  • 选择了非全部的选项,此时禁选全部

也就是说,只有这两个情况返回 true,其他时候返回 false

const checkAge = (item) => {
  if (form.value.ages.includes("全部") && item !== "全部") {
    // 选择了`全部`,此时禁选`非全部的选项`
    return true;
  } else if (!form.value.ages.includes("全部") && item === "全部") {
    // 选择了`非全部的选项`,此时`禁选全部`
    return true;
  }

  return false;
};

是不是很简单,但是还没完,上面那样子还会有小问题。

我们什么都没有选择的时候,全部选项不能选。这是因为上面选择非全部选项时的判断,写成了没有选择全部的时候,所以一开始确实没有选择全部,那么就不能选择了。所以在一开始应该判断有没有已经选中的,如果没有,就返回`` false`

const checkAge = (item) => {
  if (form.value.ages.length === 0) {
    return false;
  }
  if (form.value.ages.includes("全部") && item !== "全部") {
    return true;
  } else if (!form.value.ages.includes("全部") && item === "全部") {
    return true;
  }

  return false;
};

多个下拉框互斥

多个下拉框不能同时选择同样的选项。

  <el-select v-model="hobbys.hobby1" placeholder="请选择爱好">
    <el-option
      v-for="item in hobbyList"
      :key="item"
      :label="item"
      :value="item"
      :disabled="checkHobby(item)"
    ></el-option>
  </el-select>

有三个上面的下拉框,依次是 hobby1 hobby2 hobby3

import { reactive, toRefs } from "vue";

const state = reactive({
  hobbyList: ["听歌", "动漫", "前端"],
  hobbys: {
    hobby1: "",
    hobby2: "",
    hobby3: "",
  },
});

const { hobbyList, hobbys } = toRefs(state);

老样子,通过给 disabled属性绑定方法,把选中的值传过去。

多个下拉框互斥的实现就比较简单了,只需要遍历选中的值,是不是等于要选的值,等于的话就禁止选择(return true)。如果能遍历完,即该选项没有被其他下拉框选中过,那么就能选择( return false)。

const checkHobby = (item) => {
  for (const hobbyKey in hobbys.value) {
    // 如果已经有选中过该选项的下拉框,则禁止再次选择
    if (item === hobbys.value[hobbyKey]) {
      return true;
    }
  }

  return false;
};

一般全选的实现

什么是一般全选?其实只是为了区分上面的全选互斥。就是常见的点击全选复选框,就会选中全部选项。

<el-select
  v-model="form.ages"
  placeholder="请选择"
  multiple
  collapse-tags
  collapse-tags-tooltip
>
  <el-checkbox v-model="checked" />全选
  <el-option
    v-for="item in ageList"
    :key="item"
    :label="item"
    :value="item"
  ></el-option>
</el-select>
import { reactive, toRefs } from "vue";

const state = reactive({
  ageList: [19, 20, 21, 22],
  form: {
    ages: [],
  },
  checked: false,
});

const { ageList, form, checked } = toRefs(state);

这个时候,全选和下面的选项是互不关联的,所以我们可以通过添加 change事件,但复选框状态变化时,去修改下面的选项的选中与否。

<el-checkbox v-model="checked" @change="handleCheckAllChange" />全选
const handleCheckAllChange = () => {
  if (checked.value) {
    form.value.ages = ageList.value;
  } else {
    form.value.ages = [];
  }
};

到这一步的时候,我们就能够做到点击全选复选框,能同时修改下面选项的选中状态了,但是,还不能实现选中下面全部选项时,同时修改全选复选框为选中状态。

可以通过添加侦听器,侦听选中结果,如果发生变化,就会触发侦听器,并根据选中结果的长度和选项总长度对比。

watch(
  () => form.value.ages,
  (newValue) => {
    checked.value = newValue.length === ageList.value.length;
  }
);

如果想要加个中间态的话,就需要用到 element-plus复选框的 indeterminate属性。

这时候,复选框的状态不再是只依靠 checked了,而是 indeterminate v-model同时作用。

  • indeterminate falsev-model true时,状态为
  • indeterminate falsev-model false时,状态为空
  • indeterminate true时,状态为 -

所以要实现中间态,只需要当选中的选项的个数比总选项的个数少,且选中的选项的个数不为0时, indeterminate的值为 true即可。

<el-checkbox
  v-model="checked"
  :indeterminate="
    form.ages.length < ageList.length && form.ages.length !== 0
  "
  @change="handleCheckAllChange"
/>全选

到此这篇关于element-plus 下拉框实现全选的示例代码的文章就介绍到这了,更多相关element-plus 下拉框全选内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解决element-ui的下拉框有值却无法选中的情况

    问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中.(踩坑踩得莫名其妙) 代码段: <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options&

  • vue+elementui实现下拉表格多选和搜索功能

    本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下 在elementui的基础上对下拉框和表格进行组合 template <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px&q

  • element ui表格实现下拉筛选功能

    本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1.default-sort中prop传入要排序的字段(接口返回或自己定义的数据).order代表排序,这里用到降序 2.filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到 3.column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段) 4

  • 详解element-ui设置下拉选择切换必填和非必填

    ➢ 需求 默认都是必选 下拉选择的时候 选择必填,活动名称为必填,需要校验和显示* 选择非必填,活动名称不做校验,隐藏* ➢ 初始校验规则 经测试,网上其他的方式都没有实现需求,动态切换rules中的required没有作用 因为按照以下的写法的话,element-ui在组件初始化后校验规则就定型了,切换也没用 rules: { name: [ { required: true, message: "请输入名称", trigger: "blur" } ], regi

  • Element ui 下拉多选时新增一个选择所有的选项

    项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"

  • element-plus 下拉框实现全选的示例代码

    目录 前言 下拉框的简单使用 全选互斥 下拉框多选 全选互斥的实现 多个下拉框互斥 一般全选的实现 前言 实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了. 下拉框的简单使用 使用方法还是比较简单的 <el-select v-model="user.name" placeholder="请选择"> <el-option v-for="item in nameList" :key="ite

  • react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中,经常会出现下拉框数据很多得情况,这个时候客户一个个得找就很浪费时间,那该怎么办呢? 我们可以实现一边输入一遍模糊匹配. 实现后的效果是 具体代码实现请看下面: 我们可以在Select.Option 里面返回我们想要搜索得字段,然后通过filterOption这个属性去获取和操作. 到此这篇关于react+antd select下拉框实现模糊搜索匹配的示例代码的文章就介绍到这了,更多相关react antd select模糊搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望

  • Vue下拉框双向联动效果的示例代码

    一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示: <el-col :span=&q

  • jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码 最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的.自己琢磨了下,把功能实现,整理如下. 实现细节如有可改进的地方,不吝赐教. 首先是html部分的代码,这里有一个表格,表格里面有一些选项: <div id="list"> <table> <tr><td>选项1<input type=&quo

  • 使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static String url; private static String user; private static String password;

  • 利用js获取下拉框中所选的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

  • vue+element实现下拉菜单并带本地搜索功能示例详解

    需求: 后台返回数组对像,前端组合成数组,根据name组合成一个个数组并把后台返回的值当成一个children推入数组,在数组中自定义属性备份数据防止搜索的时候改变原数组使得数组无法回退 这里是用的vuex存储,因为多个页面使用同一个接口;所以没必要重复请请求 src\store\module\metadata.js /* * @Author: your name * @Date: 2021-09-02 15:46:45 * @LastEditTime: 2021-09-16 17:39:53

  • Dojo获取下拉框的文本和值实例代码

    Dojo Dojo是一个用javascript语言实现的开源DHTML工具包.它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因.Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在.历史问题(historical problems with DHTML).跨浏览器问题. 1.问题背景 这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本 2.实现源码 <!DOCTYP

  • asp.net中js+jquery添加下拉框值和后台获取示例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type

  • jQuery实现监听下拉框选中内容发生改变操作示例

    本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作.分享给大家供大家参考,具体如下: jQuery代码部分: <script> $(document).ready(function(){ var defaultId = "${defaultSelected}"; var defaultTime = "${timeName}"; $("select option").each(function(){ if($(this).va

随机推荐