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>
相关推荐
Yaml49 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf12 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班
ZSK63 天前
【uniapp3】分享一个自己写的h5日历组件
vue·uniapp