element plus组件二次封装

最新推荐文章于 2025-10-29 20:23:57 发布

原创

最新推荐文章于 2025-10-29 20:23:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

本文探讨了如何对Element Plus的表格组件进行二次封装，主要关注自定义表格内容的问题。在Table.vue中，利用插槽实现表格结构的灵活填充。然而，遇到一个问题，用于循环的父盒子无法使用template并添加自定义属性，目前寻求解决方案。同时，O2O.vue组件展示了如何实际应用这些封装技巧，核心在于运用作用域插槽。

自定义表格

Table.vue 表格模板，通过插槽进行填充不同的结构

问题：用来做循环的父盒子不能template 不能添加自定义属性。求大老解决

<template>
  <el-table :data="tableData" style="width: 100%" class="tab">
    <template  v-for="item in tabcur" :key="item">
      <el-table-column :label="item.labelName"  v-if="item.compon">
        <template #default="scope">
          <slot :name="item.fied" :rows="scope.row">
            <p>自定义的组件</p>
          </slot>
        </template>
      </el-table-column>

      <el-table-column :prop="item.fied" :label="item.labelName" v-else />
    </template>

    <el-table-column fixed="right" label="操作" width='160'>
      <template #default="scope">
        <el-button size=