给element的select添加复选框

需求：要求给select多选的时候，给下拉框前加上复选框样式
element select原样式

需要更改后的样式

html

 <el-selectv-model="searchObj.knowledgeIds"class="select-box"filterablemultiplecollapse-tagsstyle="margin-left: 20px"placeholder="请选择"@change="changeSelect"@visible-change="visibleSelect"><el-optionv-for="item in knowledgeArr":key="item.id":label="item.knowledgeName":value="item.id"/></el-select>

    // 下拉框展开 关闭事件visibleSelect(e) {// 获取所有的liconst lis = document.getElementsByClassName('el-select-dropdown__item')// 打开下拉框 添加inputif (e) {for (let i = 0; i < lis.length; i++) {const element = lis[i]const input = document.createElement('input')input.style.cssText = 'margin-right: 10px;'input.type = 'checkbox'// 根据是否有选中的类名来判断li是否被选中if (element.classList.contains('selected')) {// 对应复选框也设置被选中input.checked = true}element.insertBefore(input, element.lastChild)}} else {// 关闭下拉框 移除掉input--否则每次打开添加就是多个inputfor (let i = 0; i < lis.length; i++) {const element = lis[i]element.removeChild(element.firstChild)}}},

下拉框改变事件

    // 知识点变化changeSelect(value) {const lis = document.getElementsByClassName('el-select-dropdown__item')for (let i = 0; i < lis.length; i++) {const element = lis[i]// 必须使用nextTick 否则拿不到最新的修改后的dom选中状态 也就没法判断this.$nextTick(() => {// 判断当前的li是否被选中 选中的则设置复选框被选中if (element.classList.contains('selected')) {element.firstChild.checked = true} else {element.firstChild.checked = false}})// console.log(element)}}

给element的select添加复选框相关推荐

excel添加复选框的两种做法
内容提要:文章介绍excel添加复选框的方法,通过控件命令和VBA实现批量添加复选框.对Excel感兴趣的朋友可加Excel学习交流群:284029260(www.itblw.com) excel添加 ...
html设置复选框图片,css实现图片右上角添加复选框的方法
css实现图片右上角添加复选框的方法发布时间:2020-06-15 10:59:23 来源:亿速云阅读:221 作者:Leah 这篇文章给大家分享的是css实现图片右上角添加复选框的方法,相信大部 ...
C#ListView控件添加复选框并获取选中的数目
1.添加复选框:listView1.CheckBoxes = true; 2.选中listview并获取选中的数目: private void listView1_ItemChecked(object ...
中添加复选框_Word/excel中在方框中打钩/叉的符号，简单方便快捷
方法1:插入特殊符号将光标定位于需要打钩的地方,选择[插入]--[符号]--[其他符号]--更改字体为[Windings2] 方法2:使用快捷键从上面的截图中可以看到设置快捷键,所以在插入特殊符号 ...
QTableView添加复选框
原文地址::http://blog.sina.com.cn/s/blog_a6fb6cc90101iang.html 相关文章 1.QtableView中添加复选框----https://www.cn ...
组合框里添加复选框的方法
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
MFC中CListCtrl添加复选框,实现单选
记录MFC项目中CListCtrl添加复选框,实现单选步骤添加复选框绑定控件变量 CListCtrl m_ctrList; OnInitDialog函数中添加 m_ctrList.SetExten ...
使用JavaScript动态添加复选框Checkbox
首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.set ...
layui添加复选框_layui复选框使用介绍
layui复选框: 效果图 layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了.只可以通 ...

给element的select添加复选框

给element的select添加复选框相关推荐

最新文章

热门文章