* [x] 表格`el-table`+分頁`el-pagination` * [x] 彈窗`el-dialog` ## 封裝思路 借助`render`（渲染）函數實現 * 原生render函數寫起來比較難受的。但可以通過[Babel 插件](https://github.com/vuejs/jsx)實現用于在 Vue 中使用 [JSX ](https://cn.vuejs.org/v2/guide/render-function.html#JSX)語法，它可以讓我們回到更接近于模板的語法上（官方原話，哈哈）。 首先看看我們組件中的`this`都有些什么： * 列舉幾個常用屬性：`$attrs`、`$children`、`$listeners`、`$slots`等等，關鍵是在`vue2.x`怎么用，可點擊查看[文檔](https://github.com/vuejs/jsx#installation)。 * 這里先說屬性和方法的綁定方式：綁定屬性：`{...{ attrs: this.$attrs }}`；綁定方法：`{...{ on: this.$listeners }}`，下面會用到。  ## 版本說明 ``` "element-ui": "2.13.2", "vue": "2.6.10", ``` ## 表格+分頁封裝 * 網上確實有很多`JSON`+`el-table`+`el-pagination`封裝的方式，什么意思呢？就是把HTML換成JS寫法，并沒有起到簡化作用，個人認為反而帶來更大的（他人）學習和維護（額外配置）成本，所以這并不算是很好的一種方式； * 我認為封裝的定義：在盡可能保留原來的基礎上，擴展、補充或者說“承上啟下”的過程中干點什么，這樣在使用時，即可按照原基礎配置即可使用，更多附帶功能才需要去查看和學習。 * 好了，廢話不多說，說說我是如何封裝的吧，借助`render`（渲染）函數實現，不過寫起來比較難受，但好在可以通過[Babel 插件](https://github.com/vuejs/jsx)實現用于在 Vue 中使用 [JSX ](https://cn.vuejs.org/v2/guide/render-function.html#JSX)語法，它可以讓我們回到更接近于模板的語法上（官方原話，哈哈）。 * 無非就是屬性和方法的綁定： 1. 綁定屬性：`{...{ attrs: this.$attrs }}` 2. 綁定方法：`{...{ on: this.$listeners }}` * 代碼如下： ``` jsx <div class='xxx-table-container'> <el-table {...{ attrs: this.$attrs }} {...{ on: this.$listeners }}> {this.$slots.default} // 可以干點什么，如具名插槽 </el-table> </div> ``` ## 彈窗封裝 如何實現屬性和方法的綁定，其實封裝起來就簡單很多了，彈窗的代碼如下： ``` jsx <script> import elDragDialog from '@/directive/el-drag-dialog' export default { name: 'NexiotDialog', directives: { elDragDialog }, props: { closeOnClickModal: { type: Boolean, default: false }, sureBtn: { // 無slot='footer'時生效 type: Boolean, default: true } }, methods: { close() { this.$emit('update:visible', false) // this.$emit('close', false) }, sureSubmit() { this.$emit('submit', true) } }, render() { return ( <el-dialog v-el-drag-dialog custom-class='nexiot-dialog-container' {...{ attrs: { ...this.$attrs, 'close-on-click-modal': this.closeOnClickModal } }} {...{ on: this.$listeners }} > {this.$slots.default} {this.$slots.footer ? ( <span slot='footer' class='dialog-footer'> {this.$slots.footer} </span> ) : ( <span slot='footer' class='dialog-footer'> <el-button {...{ on: { click: this.close }}}>取 消</el-button> {this.sureBtn ? ( <el-button {...{ on: { click: this.sureSubmit }}} type='primary'> 確 定 </el-button> ) : ( '' )} </span> )} </el-dialog> ) } } </script> <style lang="scss" scoped> ::v-deep .nexiot-dialog-container { .el-dialog__header { padding: 0 16px; border-bottom: 1px solid #eee; height: 50px; line-height: 50px; .el-dialog__title { font-weight: 500; font-size: 16px; } } .el-dialog__headerbtn { top: 15px; } .el-dialog__footer { padding: 16px; } .el-dialog__body { padding: 16px 16px 0; } } </style> ```