在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些

方法一：下拉项增加一个【全选】,然后应该有以下几种情况：

下拉选项全都勾选时，【全选】自动勾选；下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；上面就是我要实现的功能，我好啰嗦。还是看代码吧。

超文本标记语言部分：

模板埃尔-选择多个折叠标签v-model=' selectedArray ' @ change=' change select ' @ remove-tag=' remove tag '占位符='请选择埃尔选项标签='全选值='全选@点击。原生='选择所有'/El-选项El-选项v-for='(项目，索引)在options ' : key=' index ' : label=' item。name ' : value=' item。名称/El-选项/El-选择/模板js部分：

导出默认{ data(){ return { selected array :[]，options :[{ name : }'一一，标签为： '一' }，名称为： '二二，标签: 'tow' }，名称： '三三，标签: '三' },名称： '四四，标签为： '四' },名称为： '五五，label: 'five' } ] } }，methods : { selectAll(){ if(this。选择一个数组。长度这个。选项。长度){这个。selectedarray=[]this。选项。map((item)={ this。选择一个数组。推送(项目。name)})这个。选择一个数组。' unshift('全选)} else { this.selectedArray=[] }，changeSelect(val) { if(！val.includes('全选)瓦尔。长度===这个。选项。长度){这个。选择一个数组。' unshift('全选)} else if (val.includes('全选)(瓦尔。长度-1)这个。选项。长度){这个。selectedarray=this。选择一个数组。filter((item)={ return item！=='全选}) } }，removeTag(val) { if (val==='全选){ this.selectedArray=[] } } }}看看效果图：

方法二：直接添加一个【全选】复选框，实现的功能跟方法一是一样的

超文本标记语言部分：

模板埃尔-选择多个折叠标签v-model=' selectedArray ' @ change=' changesult '占位符='请选择el-checkbox v-model='选中@change='selectAll '全选/El-复选框埃尔-选项v-for='(项目，索引)在选项：键=' index ' :标签=' item。name ' : value=' item。名称'/El-选项/el-select/templatejs部分：

导出默认{ data(){ return { checked : false，selectedArray: []，options 3360[{ name : '一一，标签为： '一' }，名称为： '二二，标签: 'tow' }，名称： '三三，标签: '三' },名称： '四四，标签为： '四' },名称为： '五五，label: 'five' } ] } }，methods : { selectAll(){ this。selectedarray=[]if(this。选中){这个。选项。map((item)={ this。选择一个数组。推送(项目。name)})else { this。selectedarray=[]} }，changeSelect(val){ if(val。长度===这个。选项。长度){这个。checked=true } else { this。checked=false } } } CSS:El-checkbox { text-align : right；宽度： 100%;填充-右： 10px}效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。