項目中想基于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>
