封装Element UI 的Table 组件

1.组件代码

<template>
  <el-table :data="tableData ? tableData : []" border :header-cell-style="{
      background: '#F5F7FA',
      'font-size': '12px'
    }" size="mini" :max-height="height" :show-summary="showSummary" :summary-method="getSummaries"
    @selection-change="handleSelectionChange" @cell-click="cellClick" @header-dragend="headerDragend"
    v-loading='loading'>
    <el-table-column v-if="hasSelection" type="selection" width="55" align="center" />
    <el-table-column type="index" min-width="55" label="序号" align="center" fixed="left" />
    <el-table-column v-if="hasOperation && operation" label="操作" align="center" fixed="left">
      <template slot-scope="scope">
        <el-button v-for="(button, index) in operation" v-if="!(button.hide && button.hide(scope.$index, scope.row))"
          :key="index" v-btnPermission="button.permission" :type="button.type || 'text'" :size="button.size || size"
          :plain="button.plain || false" class="button" @click="button.fun(scope.$index, scope.row)">
          {{ button.name }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column v-for="(item, index) of column" :key="index" :prop="item.value || item.showField"
      :label="item.title || item.showName" :min-width="item.width || '100'" :index="item.id || null"
      :align="item.align || 'center'" class="defined" show-overflow-tooltip>
      <template slot-scope="scope">
        <!-- <el-tooltip class="item" effect="light" content="Top Left 提示文字" placement="top-start"> -->
        <!-- underline 表示是否有下划线 且可以点击 -->
        <div :class="[{ preLine: item.preLine }, { underline: item.underline }]">
          {{
            item.formatter
              ? item.formatter(scope.row[item.value || item.showField])
              : scope.row[item.value || item.showField]
          }}
        </div>
        <!-- </el-tooltip> -->
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'Table',
    computed: {
      ...mapGetters(['pageModule', 'tableColumn'])
    },
    props: {
      // 表格数据
      tableData: {
        // type: Array,
        required: true
      },
      loading: {
        type: Boolean,
        default: false
      },
      // 列 标题 和 参数名
      column: {
        type: Array,
        required: true
      },
      // 操作列按钮配置
      operation: Array,
      // 是否有多选框
      hasSelection: {
        type: Boolean,
        default: false
      },
      // 是否有操作列
      hasOperation: {
        type: Boolean,
        default: true
      },
      // 是否有合计行
      showSummary: {
        type: Boolean,
        default: false
      },
      // 设定合计方案
      getSummaries: {
        type: Function,
        default: function () {}
      },
      // 单元格点击事件
      cellClick: {
        type: Function,
        default: function () {}
      },
      isDragenable: {
        type: Boolean,
        default: false
      },
      // //表头宽度拖动
      // headerDragend: {
      //   type: Function,
      //   default: function () {}
      // },
      // 操作列按钮尺寸 以及表格展示尺寸
      size: {
        type: String,
        default: 'small'
      },
      // 表格固定高度
      height: {
        type: Number,
        default: 450
      }
    },
    update() {
      this.$refs.table.doLayout()
    },

    methods: {
      // 选择check box 存储到vuex 的store中
      handleSelectionChange(val) {
        this.$store.dispatch('table/multiple', val)
      },
      // 表格列宽修改事件
      headerDragend(newWidth, oldWidth, column, event) {
        if (
          this.isDragenable &&
          column.label !== '序号' &&
          column.label !== '操作'
        ) {
          const index = this.column.findIndex(
            item => item.showField === column.property
          )
          // 深复制一个数组出来进行处理
          const clonedColumns = this._.cloneDeep(this.column)
          clonedColumns[index].width = newWidth
          clonedColumns[index].preSeq = clonedColumns[index].seq
          const showCol = {
            module: this.pageModule,
            mySingleShowColumn: clonedColumns[index]
          }
          this.$store.dispatch('column/updateColumn', showCol)
          this.$store.dispatch('column/getColumns', this.pageModule)
        } else {
          return false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  // *::-webkit-scrollbar {
  //   width: 7px;
  //   background-color: transparent;
  // }

  .underline {
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
  }

  .button {
    margin: 0; //先取消边距
    margin-top: -6px;
  }

  .preLine {
    white-space: pre-line;
  }

  .el-table th.gutter {
    display: table-cell !important;
  }
</style>
<style lang="scss">
  //气泡样式
</style>

2.父组件里使用（这里我是全局组件 我就没写引用了）

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">用户姓名: {{ name }}</div>
    <div class="dashboard-text" v-for="item in dept " :key="item.index">所属部门: {{ item }}</div>
    <Table :tableData='tableData' :column='column' :handleEidt="handleEidt" :operation='operation' />
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name',
        'dept'
      ])
    },
    data() {
      return {
        operation: [{
          name: '修改',
          fun: this.onClick
        }, {
          name: '删除',
          fun: this.onDelete
        }],
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            phone: 1235612
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            phone: 58456654
          },
        ],
        column: [{
          value: 'operation',
          title: '操作',
          width: '60'
        }, {
          value: 'name',
          title: '名称',
          width: '150'
        }, {
          value: 'address',
          title: '地址',
          // width: '200'
        }, {
          value: 'phone',
          title: '电话',
          width: '120'
        }]
      }
    },
    methods: {
      handleEidt(index, row) {
        console.log('index, row')
      },
      onClick(index, row) {
        console.log(index, row)
      },
      onDelete(index, row) {
        console.log(index, row)
      }
    }
  }

3.实现效果