基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

效果图:

组件:MultipleSelect.vue

javascript 复制代码
<template>
  <el-select v-model="selectValues" v-bind="$attrs" v-on="listeners" multiple placeholder="请选择" style="width: 50%" @change="changeSelect">
    <el-option v-if="options.length" label="全选" value="全选">
      <el-checkbox v-model="isSelectAll" @click.prevent.native>全选</el-checkbox>
    </el-option>
    <el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
      <el-checkbox v-model="item.isCheck" @click.prevent.native>{{item[props.label]}}</el-checkbox>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  name: "MultipleSelect",
  inheritAttrs: false,// 似乎设不设置都可以
  model: {
    prop: "initSelectValues",
    event: "change"
  },
  props: {
    initSelectValues: {
      type: Array,
      default: () => []
    },
    // 下拉选项
    options: {
      type: Array,
      default: () => []
    },
    // 选项键值对
    props: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value"
        }
      }
    }
  },
  data() {
    return {
      selectValues: [],
      isSelectAll: false
    }
  },
  watch: {
    // 监听(全选,全不选以及checkbox是否勾选)
    selectValues: {
      handler(arr) {
        this.options.forEach(item => {
          if (arr.includes(item[this.props.value])) {
            item.isCheck = true
          } else {
            item.isCheck = false
          }
        })
 
        if (arr.length === this.options.length) {
          this.isSelectAll = true
        } else {
          this.isSelectAll = false
        }
        // 强制更新(checkbox回显)
        this.$forceUpdate()
      }
    }
  },
  created() {
    // 回显
    this.selectValues = this.initSelectValues
  },
  methods: {
    changeSelect(val) {
      if (val.includes("全选")) {
        // 说明已经全选了,所以全不选
        if (val.length > this.options.length) {
          this.selectValues = []
        } else {
          this.selectValues = this.options.map(item => item[this.props.value])
        }
      }
      this.$emit("change", this.selectValues)
    }
  }
}
</script>
 
<style>
</style>

使用:index.vue

javascript 复制代码
<template>
  <div id="app">
    <MultipleSelect v-model="value" :options="options"></MultipleSelect>
    <el-button @click="confirm">确定</el-button>
  </div>
</template>

<script>
import MultipleSelect from "./components/MultipleSelect"
export default {
  name: 'App',
  components: {
    MultipleSelect
  },
  data() {
    return {
      value: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ]
    }
  },
  methods: {
    confirm() {
      console.log("value", this.value)
    }
  }
}
</script>

<style>

</style>

多选框多选不换行

css 复制代码
 /* 输入框超出隐藏,不换行*/
  .el-select__tags {
    flex-wrap: nowrap;
    overflow: auto;
  }

  /* 输入框最大宽度*/
   .el-select__tags-text {
    max-width: 90px;
  }
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询