項目中想基于element 中el-talbe 在做一層封裝禾锤，這樣做的好處是
- 對el-table 組件可控
- 基于el-table 組件做定制化開發(fā)
想要實現(xiàn)組件層級如下：
page 組件蛔屹，業(yè)務層代碼
my-table 組件，自己封裝的組件青团，中間層代理組件，需要開發(fā)
el-talbe 組件咖楣，基于element-ui 的table組件
image.png
開發(fā)思路
開發(fā)邏輯是督笆，在page頁面組件中，引入 my-table 組件诱贿，傳遞屬性prop到 my-table 組件娃肿，my-table 組件傳遞屬性prop 到 el-table組件。
數(shù)據(jù)傳遞
my-table需要實現(xiàn)el-table 組件的所有prop珠十，event 傳遞料扰。示意圖如下：
image.png
事件event傳遞
并且el-table 中所有的emit 事件，都需要在my-table 做一層轉(zhuǎn)發(fā)到 page 組件焙蹭。
image.png
my-table 需要做到似有似無到效果晒杈，但要做到可攔截，并且做數(shù)據(jù)格式處理孔厉，樣式定制化拯钻。
初級實現(xiàn)
page組件,所有prop都是el-table 的配置
<page
:data="data"
:height ="100"
:max-height="200"
:stripe ="false"
:border="false"
:size="'small'"
...
>
</page>
my-table 做代理轉(zhuǎn)發(fā)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>
高級實現(xiàn)
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代理轉(zhuǎn)發(fā)到el-table
<my-table>
<el-table
v-bind="$props"
>
</el-table>
</my-table>
<script>
</script>
my-table 使用v-on="$listeners"做代理轉(zhuǎn)發(fā)prop 到el-table
<my-table>
<el-table
v-bind="$props"
v-on="$listeners"
>
</el-table>
</my-table>
<script>
</script>
