vue+element table的二次封装

　
短视频，自媒体，达人种草一站服务

table.vue文件

<el-table< p="">

<pre><code><template>
<el-table
:data="tableData"
:row-class-name="tableRowClassName"
:cell-style="{textAlign:'center'}"
@selection-change="change"
:show-header="showHeader"
:border="border"
:max-height="maxHeight"
:v-loading="loading"
:class="className"
element-loading-text="给我一点时间"
stripe
fit
highlight-current-row
>
<template v-for="tableColumn in tableList">
<el-table-column
:type="tableColumn.type"
:width="tableColumn.width"
v-if="tableColumn.type === 'selection'"
></el-table-column>
<!-- slot 添加自定义配置项-->
<slot
v-if="tableColumn.slot"
:name="tableColumn.slot"
></slot>
<!-- component 特殊处理某一项-->
<component
v-else-if="tableColumn.component"
:is="config.component"
:col-config="tableColumn"
></component>
<el-table-column
:label="tableColumn.label"
:type="tableColumn.type"
:prop="tableColumn.prop"
:width="tableColumn.width"
:fixed="tableColumn.fixed "
:sortable="tableColumn.sortable"
v-if="(tableColumn.type !== 'selection')&&(tableColumn.type !== 'slot')"
>
</el-table-column>
</template>
</el-table>
</template>

<script>
export default {
data(){
return{}
},
props: {
tableList: {
type: Array,
default: function() {
return [];
}
},
tableData: {
type: Array,
default: function() {
return [];
}
},
showHeader: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
maxHeight: {
type: [String, Number],
default: null
},
loading: {
type: Boolean,
default: false
},
className: {
type: String,
default: ""
},
tableRowClassName: {
type: String,
default: ""
}
}
}
</script>
<style scoped>
</style></code></pre>

很多人不明白为什么这里要加一个slot，这个封装实际上就是把前面的tableList 作为一个 prop 传入，通过这个属性，我们就可以在table中编辑任何简单或者复制的列， 完美～

使用方法如下：

<pre><code><template>
<my-table
:tableData="tableData"
:tableList="colConfigs">
</my-table>
</template>
<script>

const PrefixPlusText = {
props: ['colConfig'],
template: `
<el-table-column :label="colConfig.label">
<span :slot-scope="{ row }">
{{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
</span>
</el-table-column>
`
}

export default {
data () {
this.colConfigs = [
{ prop: 'change', label: '变化' component: PrefixPlusText },
{ prop: 'name', label: '趋势', component: PrefixPlusText },
]
return {
tableData: [{
change: '12%',
trend: '10%
}, {
change: '-12%',
trend: '-10%'
}]
}
}
}
</script></code></pre>

总结

table 作为数据展示组件，在日常开发中经常被用到，通过这篇文章，可以看到结合 vue 的 slot/component 特性，做一层封装，可以大大简化 table 的使用，大部分时候只需写一个配置属性就可以了。