ElmentUI select基础多选基础上增加下拉全选

最新推荐文章于 2024-09-05 10:04:51 发布

yo_yo_花花

最新推荐文章于 2024-09-05 10:04:51 发布

阅读量364

点赞数 2

分类专栏：前端UI（PC）文章标签： element vue 基础多选增加全选增加全选

本文链接：https://blog.csdn.net/qq_40668835/article/details/96184971

版权

本文介绍了如何在ElementUI的select基础多选功能上增加全选选项。通过HTML、JS和CSS实现单选、多选及全选，并提供后端数据格式要求，以及示例代码和完成后的样式图。

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

ElmentUI select基础多选基础上增加下拉全选

- html
- js
- css
- 参考图：

功能：单选，多选，全选，搜索选择。

html

<template>
            <el-select class="ipt-drop"  v-model="form.companyId" @change="changeValue"  multiple placeholder="请选择" collapse-tags filterable allow-create default-first-option>
              <el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
</template>

js

1、vm 理解成this 就好
2、后端传给前端需储存首条数据为 {0: 全选, …}
3、写的比较粗糙。待有时间在整理（如果博友整理发一份收藏）

data() (
 return {
	form: {
				//companyId: [],
				endTime: '',
				taskContent: '',
				taskName: '',
				companyId: [],
				old_value: '全选',
				old_loabel: '全选',
				options: [],
				va