Element组件扩展

Element是国内比较常用的组件库。虽然组件已经提供了很多方法供我们使用，但是也会出现组件被修改两次的情况。本文主要记录开发完善Element组件库时使用了euphoria的一些方法。1.下拉选择最下方的固定项。最近遇到需要在下拉框中添加一个管理选项的按钮，但是组件中没有提供api。看了api，发现了一个el-selectvisible-change的方法，官方对他的描述是这样的：下拉框出现/隐藏时触发。当出现选择组件下拉框时，我们可以给这个组件添加一个dom作为管理按钮。visibleChange(v)">这是我们的html部分，让我们看看如何添加dom//这里v表示组件下拉框的外观visibleChange(v){let_this=thisif(v){//先找到组件的dom结构constref=this.$refs['select'];letpopper=ref.$refs.popper;如果(popper.$el)popper=popper.$el;//接下来检查结构下是否已经有管理按钮if(!Array.from(popper.children).some(v=>v.className==='el-select_groups')){//创建dom并添加到组件结构constdom=document.createElement('div')dom.className="el-select_groups"dom.innerHTML=`管理组`popper.appendChild(do米）；//给管理按钮绑定点击事件dom.addEventListener('click',function(e){//这里写点击事件执行方法ref.blur()})}}}这样，最下面的selectcomponent管理按钮写的，Cascader级联选择器也同样适用。2.el-cascader赋值通常三级联动的regionecho会出现问题。如果我们不想递归请求，只给选择框赋值，那么我们可以这样做加入。