element表格二次封装

基于element-ui的table组件和Pagination组件进行二次封装的组件eleTable，可以提供以下基础功能：
1. 表格内容的正常显示。
2. 表格内容需要处理后显示，比如时间戳转换、枚举值转换等。
3. 表格添加标签、按钮或者操作列内容显示。
4. 全选功能。
5. 其他原有的属性，如宽度、内容对齐等等属性可以直接使用。
6. 待扩展。

这个组件还抽离出了请求和查询条件的mixins混合，可以在组件中使用和传入数据。

eleTable的封装主要是为了方便开发人员在平时开发中使用表格和分页功能，如果有其他功能需要添加，可以直接在这个基础上进行扩展。

相关问题

element-plus表格二次封装

### Element Plus 表格组件二次封装

#### 封装需求分析
为了提高开发效率并简化页面逻辑，在实际项目中通常会对常用的UI库组件进行二次封装。对于`Element Plus`中的表格组件，常见的需求包括但不限于自定义配置项、统一的数据请求接口以及增强的功能扩展。

#### 创建基础结构
创建一个新的Vue 3.x工程或者在一个已有的项目里新建一个文件夹用于存放即将封装好的组件源码。假设这个路径为`src/components/CustomTable`

// src/components/CustomTable/index.js
import { defineComponent } from 'vue';
import ElTable from "element-plus/lib/el-table";
import ElPagination from "element-plus/lib/el-pagination";

export default defineComponent({
    name: "CustomTable",
    components: {
        ElTable,
        ElPagination
    },
    props: {
        data: Array, // 数据列表
        columns: Array, // 列定义
        total: Number, // 总条数
        pageSizes: Array, // 可选分页大小集合，默认[10, 20, 50, 100]
        currentPage: Number, // 当前页码
        pageSize: Number, // 每页显示数量
        loading: Boolean // 加载状态
    }
});

此部分代码初始化了一个基于`ElTable`和`ElPagination`的基础框架，并声明了一些必要的属性[^1]。

#### 实现核心功能
接下来完善内部逻辑，比如处理分页变化后的回调函数等：

methods: {
    handleSizeChange(val) {
        this.$emit('update:pageSize', val);
        this.$emit('page-change');
    },

    handleCurrentChange(val) {
        this.$emit('update:currentPage', val);
        this.$emit('page-change');
    }
}

上述方法允许外部监听到分页参数的变化，并触发相应的更新动作[^3]。

#### 完整示例
最后给出完整的HTML模板与样式设置，形成一个可复用的定制化表格组件实例：

<template>
<div class="custom-table">
    <el-table :data="data" v-loading="loading" style="width: 100%">
        <!-- 动态渲染表头 -->
        <el-table-column v-for="(column, index) in columns"
                         :key="index"
                         :prop="column.prop"
                         :label="column.label"></el-table-column>
    </el-table>

    <!-- 如果有总记录数，则显示分页控件 -->
    <div v-if="total > 0" class="pagination-container">
        <el-pagination background layout="sizes, prev, pager, next"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       :page-size="pageSize"
                       :total="total"
                       :page-sizes="pageSizes || [10, 20, 50, 100]"
        ></el-pagination>
    </div>
</div>
</template>

<style scoped lang="scss">
.custom-table{
    .pagination-container{
        margin-top: 20px;
        text-align: center;
    }
}
</style>

通过这种方式可以有效地减少重复劳动，提升团队协作效率的同时也增强了系统的灵活性和维护性。

element plus 二次封装

Element Plus 是一套基于 Vue.js 2.0 的桌面端组件库，它提供了一系列的常用 UI 组件，包括表单、表格、弹框、菜单等。它的使用非常方便，但是在一些特定的项目中，我们可能需要对 Element Plus 进行二次封装，以方便我们的开发。

首先，我们需要在项目中安装 Element Plus：

npm install element-plus --save

然后，我们可以创建一个自定义组件，在这个组件中对 Element Plus 进行二次封装。例如，我们可以创建一个名为 `ElButton` 的组件，用于封装 Element Plus 中的 `el-button` 组件：

<template>
  <el-button :type="type" :size="size" :disabled="disabled" @click="handleClick">
    {{ label }}
  </el-button>
</template>

<script>
import { ElButton } from 'element-plus';

export default {
  name: 'ElButton',
  components: {
    ElButton,
  },
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'medium',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: 'Button',
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

在这个组件中，我们引入了 Element Plus 中的 `ElButton` 组件，并且将它作为子组件进行渲染。同时，我们也定义了一些自定义的 props，例如 `type`、`size`、`disabled` 和 `label`，并且在组件的模板中使用这些 props。在组件的 methods 中，我们定义了一个 `handleClick` 方法，当用户点击按钮时，这个方法会被调用，并且会触发一个 `click` 事件，以便在父组件中监听。

这样，我们就完成了对 Element Plus 中 `el-button` 组件的二次封装。我们可以在任何地方使用这个组件，而不需要再重复编写一遍 Element Plus 的代码。