el-select多选全选

最新推荐文章于 2024-05-11 12:12:57 发布

熙冰

最新推荐文章于 2024-05-11 12:12:57 发布

阅读量7.1k

点赞数

分类专栏： Vue UI组件库文章标签： vue elementUI el-select

本文链接：https://blog.csdn.net/melodystars/article/details/104261044

版权

本文介绍了如何在 Vue.js 项目中利用 ElementUI 的 el-select 组件实现多选功能，并添加全选选项。通过示例代码详细阐述了配置选项、监听选中事件以及全选逻辑的实现过程。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-select @change="handleSelect($event)" v-model="selectVal" placeholder="请选择" multiple collapse-tags>
      <el-option
        v-for="item in array"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div>{
  {this.selectVal}}</div>
  </div>
</template>

<script>
export default {
  name: 'selectMultiple',
  data () {
    return {
      array: [],
      selectVal: [],
      oldSelectVal: []
    }
  },
  mounted () {
    this.initSelect()
  },
  methods: {
    initSelect () {
      this.array = [{label: '全部', value: 'ALL'}]
      for (let i = 0; i < 10; i++) {
        this.array.push({
          label: '选择项' + i,
          value: i
        })
      }
    },