基于elment-ui二次封装表格组件

组件没有添加翻页功能，如有需要，可自行优化拓展

• html部分

<template>
  <el-table
    v-loading="loading"
    :element-loading-text="loadingText"
    :element-loading-spinner="loadingIcon"
    ref="tableRef"
    :data="dataList"
    :height="height"
    :border="border"
    :stripe="stripe"
    :empty-text="emptyText"
    :max-height="maxHeight"
    :style="{ 'min-height': `${minHeight}px` }"
    :row-key="rowKey"
    :tree-props="treeProps"
    :row-class-name="addEvenClass"
    :header-row-class-name="headerClassName"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    :highlight-current-row="highlightCurrent"
    :show-header="isShowHeader"
    :tooltip-effect="tooltipEffect"
    :size="tableSize"
    @row-click="rowClick"
    @row-dblclick="rowDblClick"
    @selection-change="selectionChange"
    @expand-change="expandClick"
    class="u-table-el"
  >
    <template v-if="dataList.length > 0 && columns.length > 0">
      <!-- 多选功能 -->
      <el-table-column
        v-if="isSelect"
        type="selection"
        width="50"
        align="center"
      />
      <!-- 展开功能 -->
      <el-table-column
        v-if="isExpand"
        type="expand"
        :label="expandLabel"
        :width="50 + expandLabel.length * 10"
        align="center"
      >
        <template slot-scope="scope">
          <slot name="expand" v-bind="{ row: scope.row }"></slot>
        </template>
      </el-table-column>
      <!-- 序号功能 -->
      <el-table-column
        v-if="tableIndex.isIndex"
        :width="tableIndex.width"
        :fixed="tableIndex.fixed"
        label="序号"
        type="index"
        align="center"
      />
    </template>
    <!-- 表格列表数据 -->
    <template v-if="sortColumns.length > 0">
      <el-table-column
        v-for="(column, index) in sortColumns"
        :label="column.name || ''"
        :key="index"
        :width="column.width || ''"
        :min-width="column.minWidth || ''"
        :prop="column.prop || ''"
        :fixed="column.fixed ?? false"
        :sortable="column.isSort ?? false"
        :formatter="column.formatter && column.formatter()"
        :resizable="column.isResiz ?? true"
        :align="column.align || 'center'"
        :show-overflow-tooltip="column.tooltip ?? false"
      >
        <template slot-scope="scope">
          <slot :name="column.slotName" v-bind="{ row: scope.row }">
            {{ scope.row[column.prop] }}
          </slot>
        </template>
      </el-table-column>
    </template>
    <!-- 操作按钮功能 -->
    <el-table-column
      v-if="columns.length > 0 && tableOper.isOper"
      :label="tableOper.label"
      :width="tableOper.width"
      :fixed="tableOper.fixed"
      :align="tableOper.align"
    >
      <template slot-scope="scope">
        <slot name="oper" v-bind="{ row: scope.row }">
          <el-link
            class="table-link"
            v-for="(btn, index) in tableOper.linkList"
            :key="index"
            :type="btn.type || ''"
            :disabled="btn.disabled ?? false"
            :underline="btn.underline ?? tableOper.underline"
            :icon="btn.icon || ''"
            @click.stop="operClick(btn.params, scope.row, $event)"
            >{{ btn.text }}</el-link
          >
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

• js部分

<script>
export default {
  name: 'uTableEl',
  props: {
    // 加载loading
    loading: {
      type: Boolean,
      default: false
    },
    loadingText: {
      type: String,
      default: '数据加载中...'
    },
    loadingIcon: {
      type: String,
      default: 'el-icon-loading'
    },
    // 表格高度
    height: [String, Number],
    // 表格最大高度
    maxHeight: [String, Number],
    // 表格最小高度
    minHeight: [Number],
    // 是否斑马纹
    stripe: {
      type: Boolean,
      default: false
    },
    // 表格边框
    border: {
      type: Boolean,
      default: false
    },
    // 行内样式
    rowCss: {
      type: Object,
      default() {
        return {}
      }
    },
    // 空文本显示的提示内容
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    // 表格尺寸
    tableSize: {
      type: String,
      default: '',
      validator: function (value) {
        return value === 'medium' || 'small' || 'mini'
      }
    },
    // 表格数据
    dataList: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 表头数据
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    // 表格默认id
    rowKey: {
      type: String,
      default: 'id'
    },
    // tooltip的显示风格
    tooltipEffect: {
      type: String,
      default: 'light',
      validator: function (value) {
        return value === 'dark' || 'light'
      }
    },
    // 是否显示表头
    isShowHeader: {
      type: Boolean,
      default: true
    },
    // 是否需要多选功能
    isSelect: {
      type: Boolean,
      default: false
    },
    // 是否需要展开功能
    isExpand: {
      type: Boolean,
      default: false
    },
    // 展开表头名称
    expandLabel: {
      type: String,
      default: ''
    },
    // 序号内容
    indexObj: {
      type: Object,
      default() {
        return {}
      }
    },
    // 树表格参数
    treeProps: {
      type: Object,
      default() {
        return { children: 'children' }
      }
    },
    // 操作内容
    operObj: {
      type: Object,
      default() {
        return {}
      }
    },
    // 奇数行类名
    addClass: {
      type: String,
      default: ''
    },
    // 偶数行类名
    evenClass: {
      type: String,
      default: ''
    },
    // 表格头类名
    headerClassName: {
      type: String,
      default: ''
    },
    // 表格头行样式
    headerCellStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 表格行样式
    cellStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否高亮当前选中的行
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    // 是否开启单选功能
    isRowClick: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // 监听数据变化重新渲染，避免定位错位
    dataList() {
      this.$nextTick(() => {
        this.$refs.tableRef.doLayout()
      })
    }
  },
  // 进入路由重新渲染，避免定位错位
  activated() {
    this.$refs.tableRef.doLayout()
  },
  computed: {
    // 定义默认序号列数据
    tableIndex() {
      return Object.assign(
        {
          isIndex: true,
          width: 50,
          fixed: false
        },
        this.indexObj
      )
    },
    // 定义默认操作列数据
    // 默认每个按钮都有各自的属性，如果属性不存在，则查看是否存在公共的
    // isOper是否需要操作列,linkList集合字段：type(类型), text(文本), click(点击),  params(区分按钮类型，必传), underline(下划线), icon(图标)
    tableOper() {
      return {
        linkList: [],
        underline: false,
        isOper: false,
        width: 50,
        fixed: false,
        label: '操作',
        align: 'center',
        ...this.operObj
      }
    },
    // 列排序处理
    sortColumns() {
      let column = this.columns
      function compare(property) {
        if (!property) return
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value1 - value2
        }
      }
      return column.sort(compare('order'))
    }
  },
  methods: {
    // 表格操作列点击事件
    operClick(params, row, e) {
        this.emit('operClick', params, row. e)    
    }
    // 为表格奇偶行设置不同class
    addEvenClass({ row, rowIndex }) {
      let i = rowIndex % 2
      return i ? this.addClass : this.evenClass
    },
    // 表格行点击事件
    rowClick(row) {
      if (this.isRowClick) {
        this.$emit('rowClick', row)
      }
    },
    // 表格行双击事件
    rowDblClick(row) {
      this.$emit('rowDblClick', row)
    },
    // 表格多选监听事件
    selectionChange(arr) {
      if (this.isSelect) {
        this.$emit('selectionChange', arr)
      }
    },
    // 展开收缩回调
    expandClick(row, expand) {
      if (this.isExpand) {
        this.$emit('expandChange', row, expand)
      }
    }
  }
}
</script>

• 表格的样式组件里面就没有了，一般是项目统一更改表格样式，不过可以加个操作列样式，可有可无

<style scoped>
.table-link {
  margin: 0 3px;
}
</style>

• 示例

 <u-table-el :data-list="orderData"
             :columns="orderColums"
             :loading="orderLoading"
             :oper-obj="operList"
             :height="496"
             :is-select="true"
             @operClick="operClick"
             @selectionChange="selectionChange">
   <template slot="switch"
             slot-scope="{ row }">
     <el-tooltip :content="row.workStatus === 5 ? '停用' : '启用'"
                 placement="top">
       <el-switch v-model="row.workStatus"
                  :active-value="5"
                  :inactive-value="6"
                  @change="tempStatusChanged(row)">
       </el-switch>
     </el-tooltip>
   </template>
 </u-table-el>

export default {
  name: 'OrderTempDialog',
  data () {
  	// 加载动画
  	orderLoading: false,
  	// 表头列，加了slotName则是可以用插槽自定义内容
    orderColums: [
      { name: '姓名', prop: 'xm', width: '120', order: 1 },
            { name: '单位', prop: 'dwmc', width: '150', tooltip: true, order: 2 },
            { name: '性别', prop: 'xbmc', width: '60', order: 3 },
            { name: '名族', prop: 'mzmc', width: '100', order: 4, tooltip: true },
            { name: '职务', prop: 'zwmc', width: '120', order: 5, tooltip: true },
            { name: '军衔', prop: 'jxmc', width: '120', order: 6, tooltip: true },
            { name: '启用状态', prop: 'status', width: '120', order: 7, slotName: 'switch' },
            { name: '测试', prop: 'zjjzmc', width: '120', order: 8 },
            { name: '测试2', prop: 'fxwzmc', width: '100', order: 9 },
            { name: '测试3', prop: 'jkztmc', width: '100', order: 10 }
	],
  	 // 工单模板列表操作按钮
    operList: {
      // 工单模板列表操作列信息
	  fixed: 'right',
        width: 150,
        linkList: [
          { text: '详情', params: 'info' },
          { text: '删除', params: 'delete' },
          { text: '修改', params: 'edit' }
        ]
    }
  }
}