Element使用el-table組件二次封裝
前言
在vue開發中使用element-ui的el-table時一般都需要進行封裝以便於復用,提高開發效率,減少重復代碼,這篇博客對el-table進行簡單的二次封裝:
一、安裝引入
Element官方文檔
npm
安裝element-ui:
npm i element-ui -S
可以看文檔按需引入,這裡為瞭方便直接全局引入瞭:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui' // 全局引入element-ui import 'element-ui/lib/theme-chalk/index.css' // 樣式文件需要單獨引入 Vue.config.productionTip = false Vue.use(ElementUI) new Vue({ router, store, render: h => h(App) }).$mount('#app')
二、封裝功能
新建一個chris-el-table組件,遍歷表頭變量tableTitle
使用v-for
循環生成el-table-column
,使用slot
來實現自定義單元格:
<template> <div class="table-container"> <el-table :data="tableData" width="100%" :row-class-name="rowClassName" :height="height" :row-style="{height: `${rowHeight}px`}"> <template v-for="(item, index) in tableTitle"> <slot v-if="item.slot" :name="item.slot"></slot> <el-table-column v-else :key="index" :prop="item.property" :label="item.label" :min-width="item.minWidth ? item.minWidth : ''" :width="item.width ? item.width : ''"> </el-table-column> </template> </el-table> </div> </template> <script> export default { name: 'chris-el-table', props: { tableData: { // 表格數據 type: Array, default: () => { return [] } }, tableTitle: { // 表格頭標題 type: Array, require: true }, height: { // 表格高度 type: [Number, String], default: '100%' }, rowHeight: { // 表格行高 type: [Number, String], default: 44 } }, data () { return {} }, methods: { rowClassName (e) { return e.rowIndex % 2 === 0 ? '' : 'light-line' } } } </script>
三、樣式覆蓋
根據需要覆蓋el-table的默認樣式:
<style scoped lang="scss"> .table-container { /deep/ .el-table { background-color: transparent; &::before { // 表格底部邊框 background: none; } tbody tr:hover > td { // 表格觸碰樣式 background-color: #F5F7FA; } } /deep/ .el-table__header-wrapper { .el-table__cell { // 表頭樣式 height: 44px; padding: 0; background: #FFFFFF; border-bottom: #EBEEF5 solid 1px !important; text-align: center; } } /deep/ .el-table__body-wrapper { &::-webkit-scrollbar { // 表格滾動條 width: 0 !important; } .el-table__row { // 表格行樣式 background-color: #F5F7FA; .el-table__cell { padding: 0; text-align: center; border-bottom: #EBEEF5 solid 1px !important; } } .light-line { // 高亮行顏色 background-color: #FFFFFF; } } } </style>
四、使用組件
直接傳入表頭數據tableTitle
和表格數據tableData
:
<chris-el-table :table-title="tableTitle" :table-data="tableData"> </chris-el-table>
表頭數據tableTitle
大概是這樣:
tableTitle: [ { label: '日期', property: 'date' }, { label: '姓名', property: 'name' }, { label: '地址', property: 'address' }, { slot: 'handle' } ]
表格數據tableData
對應property
,大概長這樣:
tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' } ]
需要自定義的單元格使用slot
,對el-table-column
進行修改:
<chris-el-table :table-title="tableTitle" :table-data="tableData"> <el-table-column slot="handle" label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)">查看</el-button> </template> </el-table-column> </chris-el-table>
源碼扔在最後:https://github.com/chrischen0405/element-component-in-vue
以上就是Element使用el-table組件二次封裝的詳細內容,更多關於Element el-table二次封裝的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 圖文詳解Element-UI中自定義修改el-table樣式
- vue element 表頭添加斜線的實現代碼
- element el-table表格的二次封裝實現(附表格高度自適應)
- el-table點擊某一行高亮並顯示小圓點的實現代碼
- 基於element-ui表格的二次封裝實現