面试题：你有二次封装过 Element UI 的组件吗？

是的，二次封装 Element UI 组件是 Vue 项目中常见的实践，目的是为了提高代码复用性、统一组件风格、简化使用方式或扩展功能。以下是我对 Element UI 组件进行二次封装的思路和经验：

1. 二次封装的目的

提高复用性：将常用的组件逻辑封装起来，减少重复代码。
统一风格：统一项目中组件的样式和行为。
简化使用：通过封装隐藏复杂逻辑，提供更简单的 API。
扩展功能：在 Element UI 组件的基础上添加新功能或修改默认行为。

2. 二次封装的常见场景

场景 1：封装表单组件

Element UI 的表单组件（如 el-input、el-select）在使用时通常需要重复编写验证逻辑和布局代码。可以通过封装简化使用。

示例：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
};
</script>

封装后：

<template>
  <custom-form :fields="fields" v-model="form" />
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      fields: [
        { label: '用户名', prop: 'username', type: 'input' },
        { label: '密码', prop: 'password', type: 'password' },
      ],
    };
  },
};
</script>

说明：

将表单的布局、验证逻辑封装到 CustomForm 组件中。
通过 fields 配置表单项，简化使用。

场景 2：封装表格组件

Element UI 的表格组件（el-table）在使用时通常需要重复编写列定义和数据加载逻辑。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
    };
  },
};
</script>

封装后：

<template>
  <custom-table :columns="columns" :data="tableData" />
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' },
      ],
    };
  },
};
</script>

说明：

将表格的列定义和数据加载逻辑封装到 CustomTable 组件中。
通过 columns 配置表格列，简化使用。

场景 3：封装弹窗组件

Element UI 的弹窗组件（el-dialog）在使用时通常需要重复编写显示/隐藏逻辑。

示例：

<template>
  <el-dialog :visible.sync="dialogVisible" title="提示">
    <p>这是一个弹窗</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

封装后：

<template>
  <custom-dialog :visible.sync="dialogVisible" title="提示">
    <p>这是一个弹窗</p>
  </custom-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

说明：