el-select 全选

html 复制代码
<template>
  <div class="container">
    <el-select
      v-model="choosedList"
      clearable
      multiple
      collapse-tags
      placeholder="请选择"
      @change="select_Change"
    >
      <div style="padding: 0 20px; line-height: 34px">
        <el-checkbox
          v-model="chooseAll"
          :indeterminate="indeterminate"
          @change="chooseAll_Change"
          >全选</el-checkbox
        >
      </div>
      <el-option
        v-for="item in allList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chooseAll: false,
      indeterminate: false,
      choosedList: [],
      allList: [
        {
          label: "精选好物",
          value: "1",
        },
        {
          label: "炫酷动漫",
          value: "2",
        },
        {
          label: "贺岁影院",
          value: "3",
        },
      ],
    };
  },
  methods: {
    select_Change(newSelect) {
      if (newSelect.length === this.allList.length) {
        this.chooseAll = true;
      } else {
        this.chooseAll = false;
      }
    },
    chooseAll_Change() {
      if (this.choosedList.length < this.allList.length) {
        this.choosedList = this.allList.map((item) => {
          return item.value;
        });
        this.chooseAll = true;
      } else {
        this.choosedList = [];
        this.chooseAll = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 30px;
}
</style>
相关推荐
喜欢敲代码的程序员12 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_14 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte19 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说11 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
sunbyte11 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*11 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm
胡斌附体11 天前
关于vue.mixin与vue.use的用法分析
vue·区别·mixin·通用·use·生活类比