項(xiàng)目中想基于element 中el-talbe 在做一層封裝，這樣做的好處是
- 對el-table 組件可控
- 基于el-table 組件做定制化開發(fā)
想要實(shí)現(xiàn)組件層級如下：
page 組件，業(yè)務(wù)層代碼
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需要實(shí)現(xiàn)el-table 組件的所有prop，event 傳遞。示意圖如下：
image.png
事件event傳遞
并且el-table 中所有的emit 事件，都需要在my-table 做一層轉(zhuǎn)發(fā)到 page 組件。
image.png
my-table 需要做到似有似無到效果，但要做到可攔截，并且做數(shù)據(jù)格式處理，樣式定制化。
初級實(shí)現(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>
高級實(shí)現(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>
