欢迎关注微信公众号：【 全栈攻略 】

后台管理系统中,table表格是最常用的，而且权限控制到按钮颗粒度的时候，要控制操作列的按钮，所以决定封装一下，方便使用

1.新建一个Table.vue文件

	<template>
    <div>
        <el-table
          v-loading="dataSource.loading"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          @sort-change="handleSort"
          :class="{ 'no-data': !dataSource.data || !dataSource.data.length }"
          v-bind="dataSource.autoHeight ? dataSource : Object.assign({ height }, dataSource)"
          ref="table"
        >
        <!-- 是否有多选 -->
        <el-table-column
          v-if="dataSource.isSelection"
          :selectable="dataSource.selectable"
          type="selection"
          :width="dataSource.selectionWidth || 55">
        </el-table-column>
         <!-- 是否需要序号 -->
         <el-table-column
          v-if="dataSource.isIndex"
          type="index"
          label="序号"
          width="55">
        </el-table-column>

        <template v-for="item in dataSource.cols">
          <!-- 表格的列展示 特殊情况处理 比如要输入框 显示图片 -->
          <el-table-column
            v-if="item.isTemplate"
            :key="item.prop"
            v-bind="item">
            <template slot-scope="scope">
              <!-- 比如要输入框 显示图片等等 自己定义 -->
              <slot :name="item.prop" :scope="scope"></slot>
            </template>
          </el-table-column>
          <!-- 图片带tooltip -->
          <el-table-column
            v-if="item.isImagePopover"
            :key="item.prop"
            v-bind="item">
              <template slot-scope="scope">
                <el-popover
                    placement="right"
                    title=""
                    trigger="hover">
                    <div
                      class="image-popover"
                      :style="{'background-image': `url('${scope.row[scope.column.property]}')`}"></div>
                    <div
                      slot="reference"
                      class="reference-img"
                      :style="{'background-image': `url('${scope.row[scope.column.property]}')`}"></div>
                    <!-- <img slot="reference" :src="scope.row[scope.column.property]" width="40px" height="40px"> -->
                </el-popover>
              </template>
          </el-table-column>
          <!-- 大部分适用 -->
          <el-table-column 
            v-if="!item.isImagePopover && !item.isTemplate && !item.invisible"
            v-bind="item.isCodeTableFormatter ? Object.assign({ formatter: typeFormatter }, item) : item"
            :key="item.prop">
          </el-table-column>
        </template>
        <!-- 是否有操作列 -->
        <!-- 没有数据时候不固定列 -->
        <el-table-column
          :show-overflow-tooltip="dataSource.operation.overflowTooltip"
          v-if="dataSource.isOperation"
          v-bind="dataSource.data && dataSource.data.length ? { fixed: 'right' } : null"
          style="margin-right:20px"
          class-name="handle-td"
          label-class-name="tc"
          :width="dataSource.operation.width"
          :label="dataSource.operation.label"
          >
          <!-- UI统一一排放3个，4个以上出现更多 -->
          <template slot-scope="scope">
            <!-- 三个一排的情况，去掉隐藏的按钮后的长度 -->
            <template
              v-if="dataSource.operation.data.length < 4">
               <el-button
                v-for="(item,index) in dataSource.operation.data"
                v-bind="item"
                :key="item.label"
                type="text"
                size="small"
                @click.native.prevent="handleRow(scope.$index, scope.row, item.label)">
                {{ item.label }}
              </el-button>
            </template>
           <!-- 4个以上的情况 -->
            <template v-else>
              <!-- 三个一排 -->
              <el-button 
                v-for="(item,index) in dataSource.operation.data.slice(0,3)"
                :key="item.label"
                type="text"
                size="small"
                @click.native.prevent="handleRow(scope.$index, scope.row, item.label)">
                  {{ item.label }}
              </el-button>
              <!-- 三个以上出现更多 -->
              <el-dropdown >
                   <i class='iconmore pointer iconfont'></i>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="(item,index) in dataSource.operation.data.slice(3,dataSource.operation.data.length)"
                        :key="item.label"
                        @click.native.prevent="handleRow(scope.$index, scope.row, item.label)"> {{ item.label }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
              </el-dropdown>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        // 接收父组件传递过来的值
        props: {
            //  表格数据和表格部分属性的对象
            dataSource: {
                 type: Object, 
            }
        },
        watch: {
          'dataSource.cols': { // 监听表格列变化
            deep: true,
            handler () {
              // 解决表格列变动的抖动问题
              this.$nextTick(this.$refs.table.doLayout)
            }
          }
        }
    }
</script>

2.在组件中引入使用
html 引入Table组件

   	 <!-- 引入表格公共组件 START -->
      <V-Table
        :dataSource="dataSource"
        @selection-change="handleSelectionChange"
        @review="handleReview"
      >
        <!-- slot 自定义列的情况 -->
        <template slot-scope="scopes" slot="img">
          <img height='80' :src="scopes.scope.row.img"/>
        </template>
      </V-Table>
      <!-- 引入表格公共组件 END -->

Cols.js 配置表格列名文件

export const Cols = [
{
  label: '仓库',
  prop: 'warehouseName',
  isTemplate: true
},
{
  label: '包裹号',
  prop: 'packageNum',
  width: '150'
},
{
  label: '订单类型',
  prop: 'orderType',
  isCodeTableFormatter: true,
},
{
  label: '订单号',
  prop: 'waybillNum',
  width: '150'
},
{
  label: '邮寄方式',
  prop: 'mailingMethod',
}, {
  label: '商品数',
  prop: 'numberOfPackages',
}, {
  label: '包装人',
  prop: 'packagesUserName',
}, {
  label: '包装时间',
  prop: 'packagesTime',
  width: '160'
}

导入列名配置文件

	import { Cols } from './Cols'

data

 dataSource: {
        data: [], // 表格数据
        cols: Cols, // 表格的列数据
        isSelection: true, // 表格有多选时设置
        isOperation: true, // 表格有操作列时设置
        isIndex: true, // 列表序号
        loading: false, // loading
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "80", // 根据实际情况给宽度
          data: [
            {
              label: "查看", // 操作名称
              emitType: "review", // 触发父组件
              permission: "如URL" // 后期这个操作的权限，用来控制权限
            }
          ]
        }
      }

此公共表格组件，可根据项目需求自行扩展。

PS：未来的你，一定会感谢今天拼命努力的自己！