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>
相关推荐
叫我阿柒啊4 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
工业互联网专业14 小时前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang16 小时前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong95117 小时前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman
PBitW1 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊1 天前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊2 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy3 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
獨孤殤3 天前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue
BYSJMG3 天前
基于Python毕业设计推荐:基于Django的全国降水分析可视化系统
hadoop·python·django·vue·毕业设计·课程设计·毕设