文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

element-plus下拉框怎么实现全选

2023-06-30 16:45

关注

这篇文章主要介绍“element-plus下拉框怎么实现全选”,在日常操作中,相信很多人在element-plus下拉框怎么实现全选问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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);

element-plus下拉框怎么实现全选

全选互斥

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

下拉框多选

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

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

element-plus下拉框怎么实现全选

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

element-plus下拉框怎么实现全选

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

element-plus下拉框怎么实现全选

代码:

<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;};

element-plus下拉框怎么实现全选

可以看到,当绑定的 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;};

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

element-plus下拉框怎么实现全选

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

element-plus下拉框怎么实现全选

多个下拉框互斥

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

  <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;};

element-plus下拉框怎么实现全选

一般全选的实现

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

<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);

element-plus下拉框怎么实现全选

这个时候,全选和下面的选项是互不关联的,所以我们可以通过添加 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下拉框怎么实现全选

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

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

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

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

到此,关于“element-plus下拉框怎么实现全选”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯