如何全局调整Element组件功能 - extends巧用

前言

实际使用场景当中，针对外部的组件库，常需要 统一 样式及功能

就自身观察而言，部分人的第一反应，便是 逐一 调整组件参数

显而易见，这习惯性的操作，极不符合老生常谈的一个词：可维护性

受到B站 程序员小山与Bug 老师关于《自己给vue2.0第三方组件库打补丁的一种方法》 视频的启发，便有了此篇文章

关于 extends相关内容，可查看 Vue官方文档

实现思路

第一步：查询待调整源代码

以使el-select全局支持过滤可选项 为例

• 通过 node_modules/element-ui/packages/select/src/select.vue 进入 组件最上层文件
• 通过 CTRL + F 调出文件内搜索框，输入 filterable 查询
• 通过检索🔍得知，props 中对于 filterable参数 的默认写法为 filterable: Boolean

第二步：继承并调整

/** el-change.js */
// 引入源组件
import { Select } from 'element-ui'

const SelectPatch = {
  extends: Select,
  props: {
    filterable: {
      type: Boolean,
      // 为参数设置默认值，使之默认支持筛选
      default: true,
    }
  }
}

// 注册组件
export default {
  install(Vue) {
    // 此处，仍借用源组件的名称
    Vue.component(Select.name, SelectPatch)
  }
}

第三步：于 main.js 文件中使用插件

xxx
import elChange from '@/plugins/el-change'

Vue.use(elChange)
xxx

其他推荐调整

下方代码中，对于 组件引入、组件注册 等操作做了省略处理，具体参考上方内容（《继承与调整》）

el-table 设置默认格式化方法

const TableColumnPatch = {
  extends: TableColumn,
  props: {
    formatter: {
      type: Function,
      default: (row, column, cellValue) => {
        return [null, undefined, ''].includes(cellValue) ? '--' : cellValue
      },
    }
  }
}

el-table 设置表头样式

const TablePatch = {
  extends: Table,
  props: {
    headerCellStyle: {
      type: [Object, Function],
      default: () => {
        return { background: '#f0f1f2' }
      },
    },
  },
}

注意内容

由于 Element-Plus 基于 组合式API 开发的，因而在 Vue3 项目中，不再适合使用 extends 来进行调整、优化了

那么又该如何调整呢？具体可先参考 程序员小山与Bug 老师的视频《久等的vue3版element组件修改二开全过程终于来了》