elementUI之table组件封装_封装elementui的table

背景

今天带来的是UI库中的table 组件封装；背景toB开发需求中大量的使用table组件，导致代码结构层次上非常冗余,功能点也经常重复的书写；为了不做重复造轮子的工作，秉承高可用高复用的开发效率，对此进行封装

案例展示

此案例仅展示简单封装，仅供学习参考，具体需要根据自己的项目来做更加复杂的功能封装

如需使用请移至更新篇
源码：https://github.com/Dawn-ferry/vue-ele-ui.git
1
2

    <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>
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25