vue 封装el-table组件，使用v-bind="$prop
2021-01-14 本文已影响0人
webmrxu
项目中想基于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>
