背景
今天带来的是UI库中的table 组件封装;背景toB开发需求中大量的使用table组件,导致代码结构层次上非常冗余,功能点也经常重复的书写;为了不做重复造轮子的工作,秉承高可用高复用的开发效率,对此进行封装
案例展示
此案例仅展示简单封装,仅供学习参考,具体需要根据自己的项目来做更加复杂的功能封装
如需使用请移至更新篇
源码:https://github.com/Dawn-ferry/vue-ele-ui.git
<hr />
<SimpleTable
ref="multipleTable"
:tableData="tableData"
:filterColums="filterColums"
selectType="selection"
@handleSelect="handleSelect"
>
<template v-slot:tableBody="{ scopeData: { row, column } }">
<template v-if="column.property === 'enable'">
<div v-if="row.enable === 0" style="color: #d9001b">禁用</div>
<div v-else style="color: #67c23a">启用</div>
</template>
<template v-else-if="column.property === 'imgCover'">
<img v-if="row.imgCover" :src="row.imgCover" style="width: 80px; height: 80px" />
</template>
<template v-else-if="column.property === 'effectiveDate'"> {
{
row.date }}~{
{
row.endDate }} </template>
<template v-else-if="column.property === 'edit'">
<el-button type="text" size="small" @click="openFn(row)">查看</el-button>
<el-button type="text" size="small" @click="editFn(row)">编辑</el-button>