vue2 + element-ui 表格的封装

项目中遇到很多页面需要用到表格的，可以选择对表格进行封装方便复用，下面代码灵活性强，表格增、删、改、查等操作，表格中显示图片、视频、文字、时间等，可以根据需求自行选择。

其中tableConfig是表格的框架，tableData是表格的信息

<template>

  <div class="table-list-view" ref="tablesInfo">

    <el-table :data="tableData" stripe border :row-key="rowKey" :expand-row-keys="expandRowKeys" :height="(tableData != null && tableData.length) > 0 ? maxHeight : 150" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="60" v-if="tableConfig.isCheckBox" align="center" />

      <el-table-column type="index" width="60" v-if="tableConfig.isShowIndex" align="center" />

      <el-table-column v-for="(item, index) in tableConfig.props" :key="index" :label="$t(item.label)" sortable :prop="item.prop" :width="item.width ? item.width : ''" align="center">

        <template slot-scope="scope">

          <div v-if="item.type == 'text'">

            { { scope.row[item.prop] }}

          </div>

          <div v-if="item.type == 'time'">

            { { scope.row[item.prop] | filtersTime(moment) }}

          </div>

          <div v-if="item.type == 'user_image'">

            <img class="table-user_image-view" :src="getUserImage(scope.row[item.prop])" alt="" />

          </div>

          <div v-if="item.type == 'image'">

            <video  class="table-image-view" v-if="getImageVideoType(scope.row)" :src="getImageUrl(scope.row)" controls="controls"></video>

            <el-image class="table-image-view" v-else  :src="getImageUrl(scope.row)" fit="fill" :preview-src-list="getSrcList(scope.row)"></el-image>

          </div>

          <div v-if="item.type == 'text-btn'">

            <el-button type="text" size="small" @clic