element table组件二次封装

table封装组件

template

<template>
  <div class="table_box">
    <el-table :data="tableData" :border="border" height="90%" style="width: 100%;" :stripe="stripe" :empty-text="!emptyImg ? emptyText:''">
      <el-table-column type="selection" width="30" v-if="checkbox" />

      <template v-for="col in config">
        <!-- 插槽 -->
        <el-table-column
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="col.type === 'slot'">
          <template slot-scope="scope">
            <slot :name="col.prop" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <!-- 表格操作 -->
        <el-table-column
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-else-if="col.type === 'operation'">
          <template slot-scope="scope">
            <div class="btns">
              <template>
                <el-button v-for="(btn) in col.btns" :type="col.btnType" 
                :key="btn.text"
                class="btn text"
                @click="handleClick(btn.method,scope.row,scope.$index)"
                >{
  
  {btn.text}}</el-button>
              </template>
            </div>
          </template>
        </el-table-column>

        <!-- 普通数据展示 -->
        <el-table-column
          :prop="col.prop"
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="!col.type">
        </el-table-column>