wordpress心情插件,seo管理系统培训运营,贵州住房城乡建设厅官方网站,深圳找工作58同城最新招聘原文链接 el-select选择框也有多选功能#xff0c;但是没有全选。故需要改造一下#xff0c;el-select 结合 el-checkBox 实现下拉全选多选功能。 代码如下#xff0c;可直接复制使用#xff1a;
!--* Description: el-select 结合 el-checkBox 实现下拉全选多选功能
…原文链接 el-select选择框也有多选功能但是没有全选。故需要改造一下el-select 结合 el-checkBox 实现下拉全选多选功能。 代码如下可直接复制使用
!--* Description: el-select 结合 el-checkBox 实现下拉全选多选功能
--
templatediv stylepadding: 300px 100px;el-select v-modelmenus multiple collapse-tags changechangeSelectMenu placeholder请选择菜单 clearableel-checkbox v-modelcheckedAll changeselectAll全选/el-checkboxel-option v-foritem in menuList :keyitem.id :labelitem.menuName :valueitem.id/el-option/el-select/div
/template
script
export default {data () {return {checkedAll: false,menus: [],menuList: [{ id: 01, menuName: 菜单一 },{ id: 02, menuName: 菜单二 },{ id: 03, menuName: 菜单三 },{ id: 04, menuName: 菜单四 },{ id: 05, menuName: 菜单五 },{ id: 06, menuName: 菜单六 },]}},mounted () {},methods: {// 点击下拉列表选项时触发changeSelectMenu (val) {if (val.length this.menuList.length) {this.checkedAll true} else {this.checkedAll false}},// 点击“全选”按钮时触发selectAll () {this.menus []if (this.checkedAll) {this.menuList.map(item {this.menus.push(item.id)})} else {this.menus []}}}
}
/script
style langless
.el-select-dropdown {.el-checkbox {display: inline-block;margin-left: 20px;padding: 8px 0;}
}
/style
