乐趣区

关于vue.js:Element-组件拓展

jiezi

Element 作为国内比拟罕用的组件库，尽管组件曾经提供了很多办法供咱们应用，然而也会有遇到对组件进行二次更改的状况，本篇次要记录开发中，晋升 Element 组件库应用幸福感的一些办法。

1. 下拉选中底部固定项

最近遇到个需要，须要在下拉框中减少一个治理选项的按钮，然而组件内并没有提供该 api，通过对 api 的浏览，我发现了 el-select 的一个办法 visible-change, 官网是这样形容他的： 下拉框呈现 / 暗藏时触发。

通过 select 组件下拉框呈现时，咱们能够给这个组件增加一个 dom，来作为治理按钮。

<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()})
    }
  }
}

这样，select 组件的底部治理按钮就写好了，同理 Cascader 级联选择器同样实用。

2. el-cascader 赋值

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

// 给 cascader 绑定 ref
this.$ref[ref].presentText = Value
this.$ref[ref].inputValue = Value
🍑后续再补充 …

本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。

退出移动版