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>
相关推荐
有什么东东6 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络77 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡2 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙2 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端2 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化
凕雨3 天前
Cesium学习笔记——坐标系统及坐标转换
前端·javascript·笔记·学习·arcgis·vue
前端极客探险家3 天前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
末日的狂欢姐3 天前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
我爱布朗熊3 天前
1.Vue3 - 创建Vue3工程
vue