Preface
When using element-ui's el-table in vue development, it is generally necessary to encapsulate for easier reuse, improve development efficiency, and reduce duplicate code. This blog provides simple secondary encapsulation of el-table:
1. Installation and introduction
Element official documentation
npmInstall element-ui:
npm i element-ui -S
You can read the document and introduce it on demand. Here, for the convenience of direct global introduction:
import Vue from 'vue'
import App from './'
import router from './router'
import store from './store'
import ElementUI from 'element-ui' // Global introduction of element-uiimport 'element-ui/lib/theme-chalk/' // Style files need to be imported separately
= false
(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
2. Packaging function
Create a new chris-el-table component and traverse the header variablestableTitleusev-forLoop generationel-table-column,useslotTo implement custom cells:
<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="" :name=""></slot>
<el-table-column
v-else
:key="index"
:prop=""
:label=""
:min-width=" ? : ''"
:width=" ? : ''">
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'chris-el-table',
props: {
tableData: { // Table data type: Array,
default: () => {
return []
}
},
tableTitle: { // Table header title type: Array,
require: true
},
height: { // Table height type: [Number, String],
default: '100%'
},
rowHeight: { // Table row height type: [Number, String],
default: 44
}
},
data () {
return {}
},
methods: {
rowClassName (e) {
return % 2 === 0 ? '' : 'light-line'
}
}
}
</script>
3. Style coverage
Override the default style of el-table as needed:
<style scoped lang="scss">
.table-container {
/deep/ .el-table {
background-color: transparent;
&::before { // The bottom border of the table background: none;
}
tbody tr:hover > td { // Table touch style background-color: #F5F7FA;
}
}
/deep/ .el-table__header-wrapper {
.el-table__cell { // Header style height: 44px;
padding: 0;
background: #FFFFFF;
border-bottom: #EBEEF5 solid 1px !important;
text-align: center;
}
}
/deep/ .el-table__body-wrapper {
&::-webkit-scrollbar { // Table scroll bar width: 0 !important;
}
.el-table__row { // Table row style background-color: #F5F7FA;
.el-table__cell {
padding: 0;
text-align: center;
border-bottom: #EBEEF5 solid 1px !important;
}
}
.light-line { // Highlight row colors background-color: #FFFFFF;
}
}
}
</style>
4. Use components
Directly pass in the header datatableTitleand tabular datatableData：
<chris-el-table
:table-title="tableTitle"
:table-data="tableData">
</chris-el-table>
Header datatableTitleIt's probably like this:
tableTitle: [
{
label: 'date',
property: 'date'
},
{
label: 'Name',
property: 'name'
},
{
label: 'address',
property: 'address'
},
{
slot: 'handle'
}
]
Tabular datatableDatacorrespondproperty, probably like this:
tableData: [
{
date: '2016-05-02',
name: 'Wang Xiaohu',
address: 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
},
{
date: '2016-05-04',
name: 'Wang Xiaohu',
address: 'Lian 1517, Jinshajiang Road, Putuo District, Shanghai'
},
{
date: '2016-05-01',
name: 'Wang Xiaohu',
address: 'Lian 1519, Jinshajiang Road, Putuo District, Shanghai'
},
{
date: '2016-05-03',
name: 'Wang Xiaohu',
address: 'Lan 1516, Jinshajiang Road, Putuo District, Shanghai'
}
]
Need to use the custom cellslot,rightel-table-columnMake modifications:
<chris-el-table
:table-title="tableTitle"
:table-data="tableData">
<el-table-column slot="handle" label="operate">
<template slot-scope="scope">
<el-button @click="handleClick()">Check</el-button>
</template>
</el-table-column>
</chris-el-table>
The source code is thrown at the end:/chrischen0405/element-component-in-vue
The above is the detailed content of Element's secondary encapsulation using the el-table component. For more information about Element el-table secondary encapsulation, please follow my other related articles!