vue elementui二次封装el-table带插槽问题

目录elementui二次封装el-table带插槽element-uitable组件的二次封装(插槽的形式)1.外层table组件封装2.内层table组件代码elementui二次封装el-ta...

目录

elementui二次封装el-table带插槽

子组件table封装 html部分

<template>
 <div
  v-loading="loading">
  <el-table
   ref="tableData"
   :stripe="stripe"
   :height="height"
   :max-height="maxHeight"
   header-row-class-name="table-list-header"
   row-class-name="table-list-row"
   :size="tableSize"
   :data="data"
   @selection-change="handleSelectionChange"
   @current-change="handleTableCurrentChange"
   @row-click="handleTableRowClick"
   v-bind="otherConfig">
   <template v-for="(p, index) in columns">
    <!-- 选择框 -->
    <el-table-column
     v-if="p.selection"
     type="selection"
     width="p.width ? p.width : 50"
     :fixed="p.fixed"
     align="center"
     :key="index"
    ></el-table-column>
    <!-- 序号 -->
    <el-table-column
     v-else-if="p.type"
     type="index"
     width="p.width ? p.width : 80"
     label="序号"
     :index="p.indexMethod"
     :key="index"
    ></el-table-column>
    <!-- 多级表头 -->
    <el-table-column
     v-else-if="p.multi"
     align="center"
     :label="p.label"
     :key="index"
    >
     <el-table-column
      v-for="(child, childIndex) in p.children"
      :key="childIndex"
      v-bind="child"
     >
     </el-table-column>
    </el-table-column>
    <!-- 自定义内容 -->
    <el-table-column
    v-else-if="p.slot"
    :label="p.label"
    :key="index">
    <slot
     :name="p.slot"
     :fixed="p.fixed"></slot>
    </el-table-column>
    <!-- 常规字段 -->
    <el-table-column
     v-else
     :prop="p.prop"
     :width="p.width"
     :label="p.label"
     :key="index"
    ></el-table-column>
   </template>
  </el-table>
  <!-- eslint-disable -->
  <el-pagination
   v-if="isPaginationShow && pagination.total"
   class="opagination mt12"
   background
   layout="sizes, prev, pager, next"
   :page-sizes="[10, 20, 50, 100]"
   :current-page.sync="pagination.current"
   :page-size="pagination.size"
   :total="pagination.total"
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
  >
  </el-pagination>
 </div>
</template>

js部分

<script>
export default {
 name: 'AppTable',
 props: {
  columns: {
   type: Array,
   default: () => []
  },
  data: {
   type: Array,
   default: () => []
  },
  pagination: {
   type: Object,
   default: () => ({})
  },
  isPaginationShow: {
   type: Boolean,
   default: true
  },
  tableSize: {
   type: String,
   default: 'small'
  },
  stripe: {
   type: Boolean,
   default: true
  },
  otherConfig: {
   type: Object,
   default: () => {}
  },
  loading: {
   type: Boolean,
   default: false
  }
 },
 data () {
  return {}
 },
 methods: {
  // 切换页码
  handleCurrentChange () {
   this.$emit('getData')
  },
  // 切换每页条数
  handleSizeChange (value) {
   // current-page和 page-size都支持 .sync修饰符，用了.sync修饰符，就不需要手动给 this.pagination赋值了
   this.pagination.size = value
   this.$emit('getData')
  },
  // 切换选择
  handleSelectionChange (val) {
   this.$emit('changeSelection', val)
  },
  // 单选
  hanphpdleTableCurrentChange (currentRow) {
   this.$emit('changeCurrent', currentRow)
  },
  // 点击行
  handleTableRowClick (currentRow) {
   this.$emit('rowClick', currentRow)
  }
 },
 watch: {
  data () {
   // 重新请求数据时 table滚动到顶部
   this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0
  }
 }
}
</script>

在父组件中使用 html 代码

<template>
 <div class="hello">
 <app-table
   :columns="columns"
   :data="tableList"
   :pagination="pagination"
   @getData="fetchtableList"
   :loading="loading"
 >
    <template slot="action"
     slot-scope="scope">
     <el-button
      type="text"
      @click="showDetail(scope.row)">查看详情</el-button>
    </template>
 </app-table>
 </div>
</template>

js代码部分

<script>
// 引入子组件表单
import AppTable from '@/components/AppTable.vue'
export default {
 name: 'HelloWorld',
 components: { AppTable },
 data () {
  return {
   loading: false,
   columns: [
    { selection: true },
    { type: 'index' },
    {prop: 'name', label: '名称', width: 160},
    { slot: 'action', label: '操作' }
   ],
   tableList: [{}],
   pagination: {
    current: 1,
    size: 10,
    total: 100
   }
  }
 },
 methods: {
  fetchTableList () {
  // 分页时触发表单数据请求
  console.log(this.pagination)
  }
 }
}
</script>

这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。

通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。

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"
     javascript 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>
     <!-- 表格区php域 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。