项目中想基于element 中el-talbe 在做一层封装，这样做的好处是

• 对el-table 组件可控
• 基于el-table 组件做定制化开发

想要实现组件层级如下：

page 组件，业务层代码
my-table 组件，自己封装的组件，中间层代理组件，需要开发
el-talbe 组件，基于element-ui 的table组件

image.png

开发思路

开发逻辑是，在page页面组件中，引入 my-table 组件，传递属性prop到 my-table 组件，my-table 组件传递属性prop 到 el-table组件。

数据传递

my-table需要实现el-table 组件的所有prop，event 传递。示意图如下：

image.png

事件event传递

并且el-table 中所有的emit 事件，都需要在my-table 做一层转发到 page 组件。

image.png

my-table 需要做到似有似无到效果，但要做到可拦截，并且做数据格式处理，样式定制化。

初级实现

page组件,所有prop都是el-table 的配置

<page 
    :data="data" 
    :height ="100"
    :max-height="200" 
    :stripe ="false"
    :border="false"
    :size="'small'"
    ...
>
</page>

my-table 做代理转发prop 到el-table

<my-table>
   <el-table
    :data="data" 
    :height ="100"
    :max-height="200" 
    :stripe ="false"
    :border="false"
    :size="'small'"
    ...
  >
  </el-table>
</my-table>
<script>
props: {
  data,
  height,
  maxHeight,
  stripe,
  border,
  size
   ...
}
</script>

高级实现

page组件,所有prop都是el-table 的配置

<page 
    :data="data" 
    :height ="100"
    :max-height="200" 
    :stripe ="false"
    :border="false"
    :size="'small'"
    ...
>
</page>

my-table 使用v-bind="$props"做事件event代理转发到el-table

<my-table>
   <el-table
    v-bind="$props"
  >
  </el-table>
</my-table>
<script>
</script>

my-table 使用v-on="$listeners"做代理转发prop 到el-table

<my-table>
   <el-table
    v-bind="$props"
    v-on="$listeners"
  >
  </el-table>
</my-table>
<script>
</script>

如何实现自定义，添加分页组件

处理Table-column Attributes