element-ui table组件的二次封装（插槽的形式）

由于业务需求，对el-table组件进行了二次封装，封装分为两层，两个组件嵌套，也能够单独使用

    篇幅原因简单的JS逻辑处理没有贴上来了

1.外层table组件封装

        

<el-row :gutter="0">
        <el-col :span="12">
          <all-titlebox :msg="tableViewMsg" type="lable_b"></all-titlebox>
        </el-col>
        <el-col :span="12" class="all-t-r btn-box">
          <el-button size="medium" v-if="showAddButton" @click="addData()"
            >新建</el-button
          >
          <slot name="topOperation"></slot>
          <all-dropdownsetting
            v-if="showDropdownsetting"
            :list="checkList"
            :colums="showColums"
            @checkedChange="checkedChange($event)"
          ></all-dropdownsetting>
        </el-col>
      </el-row>
      <!-- 操作栏 start -->
      <!-- 分割线 start -->
      <el-row :gutter="0">
        <el-col :span="24" class="all-m-t-10">
          <div class="all-primary-line"></div>
        </el-col>
      </el-row>
      <!-- 分割线 end -->
      <el-row :gutter="0">
        <el-col :span="24" class="table-main">
          <itl-table ref="table" :colums="colums" :tableData="tableData" :operationData="operationData" v-bind="$attrs" v-on="$listeners">
            <template v-if="$scopedSlots.operation" v-slot:operation="props">
              <slot name="operation" v-bind="props"></slot>
            </template>
            <template v-for="item in colums" v-slot:[item.slot]="props">
              <slot :name="item.slot" v-bind="props"></slot>
            </template>
          </itl-table>
        </el-col>
      </el-row>

核心代码是这一段，通过插槽的形式，显示需要特殊处理的字段

        

 <template v-for="item in colums" v-slot:[item.slot]="props">
   <slot :name="item.slot" v-bind="props"></slot>
 </template>

外层组件table-view使用示例

 <table-view
      table-view-msg="合同模板管理"
      ref="table-view"
      :table-colums="tableColums"
      :table-data="table"
      add-router="/contract/contrac-template/template-edit"
      :selection='true'
      :showAllSelect="false"
      @view="viewDetail($event)"
      @edit="editData($event)"
      @del="deleteData($event)"
      @page-change="currentChange($event)"
      @size-change="sizeChange($event)"
      :total="total"
      :filter-page-sizes="filterPageSizes"
    >
      <div slot="template-type" slot-scope="{ row }">
        {{ getType(row.templateType) }}
      </div>
      <div slot="template-status" slot-scope="{ row }">
        {{ getStatus(row.templateStatus) }}
      </div>
      <!--operation插槽使用示例子 -->
      <!-- <div slot="operation" slot-scope="{ row }">
        <el-button
          type="text"
          size="small"
          >{{row.templateType}}</el-button
        >
      </div> -->
    </table-view>

2.内层table组件代码 

        

<!-- 基础表格组件 -->
    <div class="ITL-table">
      <el-row :gutter="0">
        <el-col :span="24" class="all-m-t-20 table-main">
          <!-- 表格区域 start -->
          <el-table
            ref="table"
            :data="tableData"
            :stripe="true"
            tooltip-effect="light"
            highlight-current-row
            :header-cell-class-name="cellClass"
            v-bind="$attrs"
            v-on="$listeners"
            @row-click="handleRowClick"
          >
            <el-table-column
              type="selection"
              :width="55"
              v-if="selection"
            />
            <el-table-column
              type="index"
              :width="serialNumber.width || 'auto'"
              :label="serialNumber.label"
              v-if="serialNumber.show"
            />
            <el-table-column
              v-for="item in colums"
              :key="item.id"
              :label="item.label"
              :align="item.align || 'left'"
              :width="item.width || 'auto'"
              :min-width="item.minWidth ? item.minWidth : minWidth"
              :fixed="item.fixed || false"
              :show-overflow-tooltip="
                item.tooltip === undefined ? tooltip : item.tooltip
              "
              :formatter="item.formatter"
              :type="item.type"
            >
              <template slot-scope="{ row, $index }">
                <span v-if="item.formatter">{{ item.formatter(row, dictList) }}</span>
                <slot v-else-if="item.slot" :name="item.slot" :row="row" :index='$index' />
                <span v-else>{{ row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="Object.keys(operationData).length || $slots.operation || $scopedSlots.operation"
              label="操作"
              :width="operationWidth"
              align="center"
              :fixed="operationFixed"
            >
              <div class="operation-row" slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  v-if="operationData.edit && operationData.edit.show"
                  @click="edit(scope)"
                  >{{ operationData.edit.text || '编辑' }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="operationData.view && operationData.view.show"
                  @click="view(scope)"
                  >{{ operationData.view.text || '查看' }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="operationData.del && operationData.del.show"
                  @click="del(scope)"
                  >{{ operationData.del.text || '删除' }}</el-button
                >
                <slot name="operation" :row="scope.row" :index="scope.$index"></slot>
              </div>
            </el-table-column>
          </el-table>
          <!-- 表格区域 end -->
          <!-- 分页区域 start -->
          <div class="pagination all-t-r all-m-t-10" v-if="paginationShow">
            <el-pagination
              :current-page.sync="pagination.page"
              :page-sizes="pageSizes"
              :page-size.sync="pagination.rows"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @current-change="$currentChange($event)"
              @size-change="$sizeChange($event)"
            >
            </el-pagination>
          </div>
          <!-- 分页区域 end -->
        </el-col>
      </el-row>
    </div>

内层组件 itl-table使用示例

        

  <itl-table ref="resumeTable" :paginationShow="false" @view="sendResume" :noHandleRowClick="true" :colums="colums" :tableData="resumeList" @selection-change="onSingleSelection" :showAllSelect="false" :operationData="operationData" :serialNumber="{show:false}" :selection="true">
   <span slot="orgName" class="selectRow" slot-scope="scope" @click="getCompanyIntroduciton(scope.row.orgId)">
       <span>{{ scope.row.orgName }}</span>
   </span>
   <span slot="postName" class="selectRow" slot-scope="scope"         @click="announceClick(scope.row.id)">
      <el-tooltip effect="light" placement="top">
          <div slot="content" v-html="scope.row.qualification"></div>
              <span>{{ scope.row.postName }}</span>
       </el-tooltip>
    </span>
 </itl-table>