Element 组件拓展

Element 作为国内比较常用的组件库，虽然组件已经提供了很多方法供我们使用，但是也会有遇到对组件进行二次更改的情况，本篇主要记录开发中，提升Element组件库使用幸福感的一些方法。

1. 下拉选中底部固定项

最近遇到个需求，需要在下拉框中增加一个管理选项的按钮，但是组件内并没有提供该api，通过对api的阅读，我发现了el-select的一个方法visible-change,官方是这样描述他的：下拉框出现/隐藏时触发。

通过select组件下拉框出现时，我们可以给这个组件添加一个dom，来作为管理按钮。

1
2
3
4
5
6
7
<el-select v-model="value" placeholder="请选择" ref="select" @visible-change="v => visibleChange(v)">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  </el-option>
</el-select>
````
这是我们的html部分，下面看如何添加dom

// 这里v表示组件下拉框出现情况
visibleChange(v) {
let _this = this
if(v) {
// 首先找到组件的dom结构
const ref = this.$refs[‘select’];
    let popper = ref.$refs.popper;
    if (popper.$el) popper = popper.$el;
// 接下来，查看该结构下是否已经存在了管理按钮
if (!Array.from(popper.children).some(v => v.className === ‘el-select_groups’)) {
// 创建dom并添加到组件结构内
const dom = document.createElement(‘div’)
dom.className = “el-select_groups”
dom.innerHTML = <i class="icon el-icon-shezhi1" style="margin-right: 4px"></i><span>管理分组</span>
popper.appendChild(dom);
// 给管理按钮绑定点击事件
dom.addEventListener(‘click’, function(e) {
// 此处写点击事件执行方法
ref.blur()
})
}
}
}

1
2
3
4
5
6
这样，select组件的底部管理按钮就写好了，同理Cascader级联选择器同样适用。


## 2. el-cascader 赋值

通常三级联动的地区回显都会遇到问题，如果我们不想递归请求，仅仅只是给选择框赋值，那么我们可以这样操作

// 给cascader绑定ref
this.$ref[ref].presentText = Value
this.$ref[ref].inputValue = Value
```