vue element el-select 下拉多选带有全选框

最新推荐文章于 2025-09-04 12:14:05 发布

原创最新推荐文章于 2025-09-04 12:14:05 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

本文介绍了如何在Vue中使用Element UI的select组件创建一个支持多选并配备全选框的功能，适合前端开发者学习和实践。

vue element el-select 下拉多选带有全选框

在这里插入图片描述

<template>
  <div>
    <el-form ref="form" label-width="80px" :model="test">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="核算中心:">
            <el-select
              v-model="test.code"
              multiple
              collapse-tags
              v-bind="$attrs"
              v-on="$listeners"
            >
              <span class="check_left">全选</span>
              <el-checkbox
                v-model="check"
                class="m-l-20"
                :indeterminate="test.code.length !== options.length"
                @change="selectAll"
              >
              </el-checkbox>
              <span :class="test.code.length ? 'check_right rights' : 'check_right1 rights'"
                >勾选选项</span
              >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      test: {
        code: ["选项1", "选项2", "选项3", "选项4", "选项5"],
      },
      options: [
        { value: "选项1", label: "黄金糕" },
        { value: "选项2", label: "双皮奶" },
        { value: "选项3", label: "蚵仔煎" },
        { value: "选项4", label: "龙须面" },
        { value: "选项5", label: "北京烤鸭" },
      ],
    };
  },
  computed: {
    check: {
      get() {
        if (this.test.code.length === this.options.length) {
          return true;
        }
        return false;
      },
      set() {},
    },
  },
  mounted() {},
  methods: {
    selectAll(checked) {
      if (checked) {
        this.test.code = this.options.map((d) => d.value);
      } else {
        this.test.code = [];
      }
    },
  },
};
</script>
<style scoped>
.check_left {
  font-size: 14px;
  padding-left: 5px;
  padding-right: 20px;
  color: #409eff;
}
.rights {
  font-size: 12px;
  padding-left: 5px;
}
.check_right {
  color: #409eff;
}
</style>