element ui Table 二次封装

表格的分页

• 在利用element ui Table编写项目时,会存在表格展示的数据存在分页的情况
  • 普遍的做法

   // 利用element ui 的 el-table与el-pagination
   <el-table :data="data">
     <el-table-column type="selection" widht="48"></el-table-column>
     <el-table-column v-for="(item,index) in columns" 
     :key="index"
     :lable="item.lable"
     :prop="item.prop"></el-table>
   </el-table>
   <el-pagination layout="prev, pager, next"
     :total="50"></el-pagination>
  

  每次编写都需要写那么多的标签与方法等，何不再进行封装，只需编写一个标签就完成Table表格与分页的展示呢
  • 封装后

   // 新建我们的组件文件如MyTable.vue文件
   <template>
     <div class="myTable">
        <el-table :data="tableData">
         <el-table-column v-if="hasSelection" type="selection" widht="48"></el-table-column>
         <el-table-column v-for="(item,index) in columns" 
         :key="index"
         :lable="item.lable"
         :prop="item.prop"></el-table>
       </el-table>
       <el-pagination v-if="hasPagination" layout="prev, pager, next"
         :total="50"></el-pagination>
     </div>
   </template>
   <script>
     export default {
       name:'myTable',
       props:{
         hasSelection:{
           type:Boolean,
           default:false
         },
         hasPagination:{
           type:Boolean,
           default:false
         },
         tableData:{
           type:Object,
           default:()=>{return {}}
         },
         columns:{
           type:Object,
           default:()=>{return {}}
         }
       },
       data(){
         return {}
       },
     }
   </script>
  

  • 在需要使用的页面使用

   <template>
     <myTable 
       :hasSelection="hasSelection"
       :hasPagination="hasPagination"
       :tableData="tableData"
       :columns="columns"></myTable>
   </tempalte>
   <script>
   import myTable from '@/components/MyTable'
   export default {
     name:'***',
     components:{myTable}
     data(){
       return {
         hasSelection:true,
         hasPagination:true,
         tableData:{} // tableData根据后台接口数据返回
       }
     }
     computed:{
       columns(){ // 表头信息
         /**
          * 表头信息为什么写在computed里面
          * 由于我最近所的项目是基于i18n国际化的
          * 如果写在data里面，不能根据i18n的语言切换实时进行切换
          **/ 
         return [
           {lable:'标题1',prop:'title1'},
           {lable:'标题2',prop:'title2'},
           {lable:'标题3',prop:'title3'},
         ]
       }
     }
   }
   </script>
  

  这样我们就实现了简单的table表格封装，在需要使用的地方直接引入我们封装好的组件传入对应对应的参数就能实现表格的展示与分页和选择框的展示了。

列表中单元格的内容自定义

• 上面我们已经实现了简单的'element ui Table'封装，但是还是不能实现一些复杂的表格展示，如图1：

table_test.png

• 封装组件

<template>
  <div class="Ab_tbale">
    <el-table
      ref="table"
      element-loading-text="Loading"
      :data="tableData"
      border
      :fit="true"
      tooltip-effect="dark"
      style="width:100%"
      :max-height="maxHeight"
      @selection-change="handlerSelectChange"
      @select="handlerSelect"
      @select-all="handlerSelectAll"
    >
      <el-table-column
        v-if="hasSelect"
        type="selection"
        width="38"
      ><!--------></el-table-column>
      <el-table-column
        v-for="(item,index) in columns"
        :key="index"
        :width="item.width ? item.width : ''"
        :align="item.align"
        :label="item.label"
        :prop="item.param"
        :sortable="item.sortable ? 'custom' : false"
      >
        <template slot-scope="scope">
          <expand-dom v-if="item.render" :column="item" :row="scope.row" :render="item.render" :index="index">
            <!-- {{ item.render(scope.row) }} -->
          </expand-dom>
          <span v-else>{{ scope.row[item.param] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableOption.label"

        :fixed="tableOption.fixed"
        :width="tableOption.width"
        :min-width="tableOption.minWidth"
        :label="tableOption.label"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <template v-for="(item,index) in tableOption.options">
            <el-button
              :key="index"
              :disabled="item.disabled?item.disabled(scope.row):false"
              :type="item.type"
              :size="item.size?item.size:''"
              :icon="item.icon"
              @click="handleButton(item.methods,scope.row,scope.row)"
            >
              {{ item.label }}
            </el-button>
          </template>
        </template>

      </el-table-column>

    </el-table>
    <el-pagination
      v-if="hasPageTotal"
      background
      :current-page="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      layout="prev, pager, next"
      :total="totalPage"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  name: 'Table',
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }

      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    }
  },
  props: {
    pageCount: { // 总页数
      type: Number,
      default: 1
    },
    totalPage: { // 总条数
      type: Number,
      default: 1
    },
    currentPage: { // 当前页
      type: Number,
      default: 1
    },
    pageSize: { // 每页显示条数
      type: Number,
      default: 10
    },
    maxHeight: { // 最大高度
      type: String,
      default: ''
    },
    hasPageTotal: { // 是否显示分页
      type: Boolean,
      default: false
    },
    hasSelect: { // 是否有选择框
      type: Boolean,
      default: false
    },
    tableData: { // table表单Object
      type: Array,
      default: () => {
        return []
      }
    },
    columns: { // table表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableOption: { // 操作功能按钮数据
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    handlerSelectAll(val) {
      this.$emit('handlerSelectAll', val)
    },
    handlerSelect(value, obj) { // 选中项
      this.$emit('handlerSelect', value)
    },
    handlerSelectChange(value) {
      this.$emit('handlerSelectChange', value)
    },
    handleButton(methods, row, index) { // 按钮事件
      this.$emit('handleButton', { 'methods': methods, 'row': row, 'index': index })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$emit('handlePageChange', val)
    }
  }
}
</script>
<style lang="scss">
.Ab_tbale{
  .el-pagination{
    text-align: right;
  }
  th{
    background-color:#f5f5f5;
    font-weight: bold;
  }
  .el-table-column--selection div.cell{
    text-overflow: initial !important;
  }
}
</style>

• 组件使用

  <template>
     <myTable
        :table-data="tableData"
        :columns="columns"
        :table-option="tableOption"
        :max-height="'600px'"
        :has-select="true"
        :total-page="pageData.total"
        :current-page="pageIndex"
        :page-count="pageData.last"
        :page-size="pageData.limit"
        :has-page-total="true"
        @handleButton="handleButton"
        @handlePageChange="handlePageChange"
      ></myTable>
  </template>
  <script>
    import myTable from '@/components/MyTable'
    import { getOrderList } from '@/api/order'
    export default {
      name:'****',
      components:{myTable},
      data () {
        return {
          tableData: [], // 根据后台接口获得
          pageData: {}, // 页码对象
          pageIndex: 1
        }
      },
      computed: {
        columns() { // 表头配置对象
          return [
            { label: this.$t('orderManagement.orderNum'), param: 'no', align: 'center', width: '' },
            { label: this.$t('orderManagement.orderTitle'), param: 'title', align: 'center', width: '' },
            { label: this.$t('orderManagement.totalSum'), param: 'totalFee', align: 'center', width: '', render: (h, params) => {
              return h('span', { class: { 'order_status_color_orang': true }}, params.row.dealFee)
            } },
            { label: this.$t('orderManagement.orderType'), param: 'statusLabel', align: 'center', width: '', render: (h, params) => {
              return h('span', {
                class: {
                  'order_status_color_gress': params.row.status === 1,
                  'order_status_color_red': params.row.status === 2 || params.row.status === 4,
                  'order_status_color_orang': params.row.status === 3,
                  'order_status_color_blue': params.row.status === 5
                }
              }, params.row.statusLabel)
            } }
          ]
        },
        tableOption() { // 操作按钮配置对象
          return {
            label: this.$t('orderManagement.operation'),
            width: '',
            minWidth: this.minWidth,
            fixed: 'right',
            options: [
              { label: this.$t('default.see'), type: 'default', icon: 'el-icon-view', methods: 'preview', size: 'mini' },
              { label: this.$t('default.payment'), type: 'primary', icon: 'el-icon-shopping-cart-2', methods: 'payment', size: 'mini', disabled: item => {
                if (item.status === 3 || item.status === 4 || item.status === 5) {
                  return true
                } else {
                  return false
                }
              } },
              { label: this.$t('orderManagement.orderClose'), type: 'danger', icon: 'el-icon-error', methods: 'close', size: 'mini', disabled: item => {
                if (item.status < 3) {
                  return false
                } else {
                  return true
                }
              } }
            ]
          }
        }
      },
      mounted(){
        this.getList()
      },
      methods: {
        handlePageChange(pageIndex) {
          var data = {}
          data.page = pageIndex
          getOrderList(data).then(res => {
            if (res.code === 0) {
              this.tableData = res.data.list
              this.pageData = res.data.page
            }
          })
        },
        getList() {
          var data = {}
          data.page = this.pageIndex
          getOrderList(data).then(res => {
            if (res.code === 0) {
              this.tableData = res.data.list
              this.pageData = res.data.page
            }
          })
        },
        handleButton(data) {
          var funType = data.methods
          if (funType === 'close') {
            this.orderClose(data.row.no)
          } else {
            this.showPopDetial(data.methods, data.row.no)
            this.selectOrderItem = data.row
          }
        }
      }
    }
  </script>