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>
相关推荐
程序视点16 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
赢乐3 小时前
使用Element UI实现前端分页,前端搜索,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量
前端分页·element ui·跨页选择·el-table表格·限制多选数量·切换分页保留数据·前端搜索过滤
ZwaterZ5 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ7 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七9 小时前
vue2-vuex
前端·vue
小小黑00711 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler13 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
逆旅行天涯19 小时前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
DDDHL_1 天前
vitepress博客模板搭建
前端·vue