element-ui table表格封装应用

1、可直接复制粘贴引用

<template>
  <div>
    <el-table
      ref="elTable"
      class="lk-table-offsetTop"
      :class="['lk-table',{'isShowScrollbar':isShowScrollbar}]"
      :height="screenTableHeight"
      v-bind="elTableProps"
      @mouseover.native="mouseover($event)"
      @mouseout.native="mouseout($event)"
      @row-click="rowClick"
      v-on="$listeners">
      <el-table-column
        v-if="rowSelection"
        type="selection"
        width="60"
        align="center"
        :selectable="selectable"
        disabled
        :show-overflow-tooltip="showOverflowTooltip"
        fixed
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="50"
        align="center"
        fixed
      ></el-table-column>
      <el-table-column
        v-for="(column,colI) in columns"
        :key="colI"
        v-bind="column"
        :show-overflow-tooltip="showOverflowTooltip"
        :sort-orders="!column.sortOrders?['ascending', 'descending', null]:column.sortOrders"
        :fixed="column.fixed">
        <template
          slot="header"
          slot-scope="scope">
          <slot
            v-if="column['slotHeader']"
            :name="column['slotHeader']"
            v-bind="scope"
            :column="column"></slot>
          <span v-else>{{ column['label'] ? column['label'] : '-' }}</span>
        </template>
        <template slot-scope="scope">
          <slot
            v-if="column['slotName']"
            :name="column['slotName']"
            v-bind="scope"></slot>
          <span v-else>{{ $lkcommon.isEmpty(scope.row[column['prop']]) ? '-':scope.row[column['prop']] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table } from 'element-ui';

export default {
  name: 'LkTable',
  components: {},
  props: Object.assign({}, Table.props, {
    columns: {
      type: Array,
      default: () => []
    },
    rowSelection: {
      type: Boolean,
      default: false
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    rowStyle: {
      type: Object,
      default: { height: '48px' }
    },
    stripe: {
      type: Boolean,
      default: true
    },
    selectable: {
      type: Function,
      default: (row, index) => true
    },
    height: {
      type: [Number, String],
      default: () => ''
    },
    // 动态配置表格高度时表格距离底部的高度
    bottomHeight: {
      type: Number,
      default: 86
    },
    // 是否动态设置表格高度
    autoHeight: {
      type: Boolean,
      default: false
    },
    // 是否单行显示，当内容过长被隐藏时显示 tooltip
    showOverflowTooltip: {
      type: Boolean,
      default: true
    }
  }),
  // 定义属性
  data() {
    return {
      // eslint-disable-next-line no-mixed-spaces-and-tabs
      isShowScrollbar: false,
      screenTableHeight: null
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    elTableProps: function () {
      const props = {};
      Object.keys(Table.props).forEach(k => {
        typeof this[k] !== 'undefined' && (props[k] = this[k]);
        return props[k];
      });
      return props;
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.screenTableHeight = this.height;
    });
    // 动态设置表格的高度
    this.autoHeight && this.setTableHeight(true);
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  },
  // 方法集合
  methods: {
    rowClick(row) {
      this.$emit('rowClick', row);
    },
    clearSelection() {
      this.$refs.elTable.clearSelection(arguments);
    },
    toggleRowSelection() {
      this.$refs.elTable.toggleRowSelection(arguments);
    },
    toggleAllSelection() {
      this.$refs.elTable.toggleAllSelection(arguments);
    },
    toggleRowExpansion() {
      this.$refs.elTable.toggleRowExpansion(arguments);
    },
    setCurrentRow() {
      this.$refs.elTable.setCurrentRow(arguments);
    },
    clearSort() {
      this.$refs.elTable.clearSort(arguments);
    },
    clearFilter() {
      this.$refs.elTable.clearFilter(arguments);
    },
    doLayout() {
      this.$refs.elTable.doLayout(arguments);
    },
    sort() {
      this.$refs.elTable.sort(arguments);
    },
    // 移进
    mouseover() {
      this.isShowScrollbar = true;
    },
    mouseout() {
      this.isShowScrollbar = false;
    },
    // 设置表格的高度
    setTableHeight(onresize = false) {
      if (this.height) return;
      this.$nextTick(() => {
        try {
          const tableTop = this.getElementTop(document.querySelector('.lk-table-offsetTop')) + this.bottomHeight;
          const _height = `${document.documentElement.clientHeight}` - tableTop;
          this.screenTableHeight = _height > 200 ? _height : 200;
        } catch (error) {
        }
      });
      if (!onresize) return;
      window.onresize = () => {
        this.setTableHeight();
      };
    },
    // 获取元素距离浏览器窗口顶部的高度
    getElementTop(el) {
      let actualTop = el.offsetTop || 0;
      let current = el.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      return actualTop;
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
@import "@/styles/element-variables.scss";

.lk-table {
  background-color: #FFFCF9;
  color: #333333;
  // head
  ::v-deep thead {
    color: #7b7f8d;

    th {
      font-weight: normal;
    }
  }

  ::v-deep.el-table__header-wrapper {
    border-radius: 10px 10px;
    .has-gutter {
      tr {
        th {
          border: none;

          &:nth-child(1) {
            border-radius: 12px 0 0 12px;
          }
        }
      }
    }
  }

  ::v-deep.el-table__fixed {
    .el-table__fixed-header-wrapper {
      .el-table__header {
        tr {
          th {
            border-radius: 10px 0px 0 10px;
          }
        }
      }
    }
  }

  ::v-deep th.el-table__cell {
    background-color: $lk-table-header-background;

    .cell {
      span {
        color: $lk-table-header-color;
        font-weight: 500;
        font-size: 14px;
      }
    }
  }

  body
  &.el-table--striped
    ::v-deep
    .el-table__body
    tr.el-table__row--striped
    td.el-table__cell {
    background-color: #FFFCF9;
  }
  ::v-deep tr {
    background-color: #FFFCF9;
  }

  &.el-table--striped ::v-deep .el-table__body tr.hover-row {
    &,
    &.el-table__row--striped {
      &,
      &.current-row {
        > td.el-table__cell {
          background-color: $lk-table-hover-background;
        }
      }
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-button {
      display: none;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      display: none;
    }

    ::v-deep .el-table__body-wrapper:-webkit-scrollbar-corner {
      display: none;
    }
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #dddee0;
    display: block;
  }

  .isShowScrollbar {
     ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      display: block;
    }
  }

  ::v-deep.el-table__fixed::before,
  ::v-deep.el-table__fixed-right::before {
    height: 0px !important;
  }
}

::v-deep.el-table::before {
  height: 0px !important;
}

::v-deep.el-table--border::before {
  height: 1px !important;
}
</style>

2、在组件中引用

html中

		<LkNescTable
            :row-style="{height: '55.5px'}"
            :data="tableData"
            :border="false"
            :autoHeight="false"
            :columns="columns"
          >
            <template slot="tqJe" slot-scope="{row}">
              <el-input
                v-model="row.tqJe"
                maxlength="50"
                :disabled="editRight"
                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')"
                style="width:100%"></el-input>
            </template>
          </LkNescTable>

data()：columns中prop值绑定后端返回数据的字段，slotName可对当前字段进行单独编辑使用

	columns: [
        { prop: 'contractId', label: '合同编号' },
        { prop: 'tqJe', label: '已提取金额（元）', slotName: 'tqJe' },
        { prop: 'lrsj', label: '录入时间' }
      ],