* [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>
```
- 首頁
- 2021年
- 基礎知識
- 同源策略
- 跨域
- css
- less
- scss
- reset
- 超出文本顯示省略號
- 默認滾動條
- 清除浮動
- line-height與vertical-align
- box-sizing
- 動畫
- 布局
- JavaScript
- 設計模式
- 深淺拷貝
- 排序
- canvas
- 防抖節流
- 獲取屏幕/可視區域寬高
- 正則
- 重繪重排
- rem換算
- 手寫算法
- apply、call和bind原理與實現
- this的理解-普通函數、箭頭函數
- node
- nodejs
- express
- koa
- egg
- 基于nodeJS的全棧項目
- 小程序
- 常見問題
- ec-canvas之橫豎屏切換重繪
- 公眾號后臺基本配置
- 小程序發布協議更新
- 小程序引入iconfont字體
- Uni-app
- 環境搭建
- 項目搭建
- 數據庫
- MySQL數據庫安裝
- 數據庫圖形化界面常用命令行
- cmd命令行操作數據庫
- Redis安裝
- APP
- 控制縮放meta
- GIT
- 常用命令
- vsCode
- 常用插件
- Ajax
- axios-services
- 文章
- 如何讓代碼更加優雅
- 虛擬滾動
- 網站收藏
- 防抖節流之定時器清除問題
- 號稱破解全網會員的腳本
- 資料筆記
- 資料筆記2
- 公司面試題
- 服務器相關
- 前端自動化部署-jenkins
- nginx.conf配置
- https添加證書
- shell基本命令
- 微型ssh-deploy前端部署插件
- webpack
- 深入理解loader
- 深入理解plugin
- webpack注意事項
- vite和webpack區別
- React
- react+antd搭建
- Vue
- vue-cli
- vue.config.js
- 面板分割左右拖動
- vvmily-admin-template
- v-if與v-for那個優先級高?
- 下載excel
- 導入excel
- Echart-China-Map
- vue-xlsx(解析excel)
- 給elementUI的el-table添加骨架
- cdn引入配置
- Vue2.x之defineProperty應用
- 徹底弄懂diff算法的key作用
- 復制模板內容
- 表格操作按鈕太多
- element常用組件二次封裝
- Vue3.x
- Vue3快速上手(第一天)
- Vue3.x快速上手(第二天)
- Vue3.x快速上手(第三天)
- vue3+element-plus搭建項目
- vue3
- 腳手架
- vvmily-cli
- TS
- ts筆記
- common
- Date
- utils
- axios封裝
- 2022年
- HTML
- CSS基礎
- JavaScript 基礎
- 前端框架Vue
- 計算機網絡
- 瀏覽器相關
- 性能優化
- js手寫代碼
- 前端安全
- 前端算法
- 前端構建與編譯
- 操作系統
- Node.js
- 一些開放問題、智力題