增加注释

+/*
+ * FileName: lb-column.vue
+ * Remark: element-column
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 9:58:23 am
+ * Last Modified: Tuesday, 19th March 2019 10:14:42 am
+ * Modified By: 任超
+ */
+
+<template>
+  <el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
+    :index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
+    :fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
+    :sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
+    :resizable="column.resizable || true" :formatter="column.formatter"
+    :show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
+    :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
+    :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
+    :reserve-selection="column.reserveSelection || false" :filters="column.filters"
+    :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
+    :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
+    <template slot="header" slot-scope="scope">
+      <lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
+      </lb-render>
+      <span v-else>{{ scope.column.label }}</span>
+    </template>
+
+    <template slot-scope="scope">
+      <lb-render :scope="scope" :render="column.render">
+      </lb-render>
+    </template>
+
+    <template v-if="column.children">
+      <lb-column v-for="(col, index) in column.children" :key="index" :column="col">
+      </lb-column>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import LbRender from './LbRender'
+import forced from './forced.js'
+export default {
+  name: 'LbColumn',
+  props: {
+    column: Object,
+    headerAlign: String,
+    align: String
+  },
+  components: {
+    LbRender
+  },
+  methods: {
+    setColumn () {
+      if (this.column.type) {
+        this.column.renderHeader = forced[this.column.type].renderHeader
+        this.column.render = this.column.render || forced[this.column.type].renderCell
+      }
+      if (this.column.formatter) {
+        this.column.render = (h, scope) => {
+          return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
+        }
+      }
+      if (!this.column.render) {
+        this.column.render = (h, scope) => {
+          return <span>{scope.row[scope.column.property]}</span>
+        }
+      }
+    }
+  },
+  watch: {
+    column: {
+      handler () {
+        this.setColumn()
+      },
+      immediate: true
+    }
+  }
+}
+</script>

+/*
+ * FileName: lb-render.vue
+ * Remark: 自定义render
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 10:15:30 am
+ * Last Modified: Tuesday, 19th March 2019 10:15:32 am
+ * Modified By: 任超
+ */
+<script>
+export default {
+  name: 'LbRender',
+  functional: true,
+  props: {
+    scope: Object,
+    render: Function
+  },
+  render: (h, ctx) => {
+    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
+  }
+}
+</script>

+export default {
+  selection: {
+    renderHeader: (h, { store }) => {
+      return (
+        <el-checkbox
+          disabled={store.states.data && store.states.data.length === 0}
+          indeterminate={
+            store.states.selection.length > 0 && !store.states.isAllSelected
+          }
+          nativeOn-click={store.toggleAllSelection}
+          value={store.states.isAllSelected}
+        />
+      )
+    },
+    renderCell: (h, { row, column, store, $index }) => {
+      return (
+        <el-checkbox
+          nativeOn-click={event => event.stopPropagation()}
+          value={store.isSelected(row)}
+          disabled={
+            column.selectable
+              ? !column.selectable.call(null, row, $index)
+              : false
+          }
+          on-input={() => {
+            store.commit('rowSelectedChanged', row)
+          }}
+        />
+      )
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: (h, scope) => {
+      return <span>{scope.column.label || '#'}</span>
+    },
+    renderCell: (h, { $index, column }) => {
+      let i = $index + 1
+      const index = column.index
+
+      if (typeof index === 'number') {
+        i = $index + index
+      } else if (typeof index === 'function') {
+        i = index($index)
+      }
+
+      return <div>{i}</div>
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: (h, scope) => {
+      return <span>{scope.column.label || ''}</span>
+    },
+    renderCell: (h, { row, store }, proxy) => {
+      const expanded = store.states.expandRows.indexOf(row) > -1
+      return (
+        <div
+          class={
+            'el-table__expand-icon ' +
+            (expanded ? 'el-table__expand-icon--expanded' : '')
+          }
+          on-click={e => proxy.handleExpandClick(row, e)}
+        >
+          <i class='el-icon el-icon-arrow-right' />
+        </div>
+      )
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+}

+/*
+ * FileName: lb-table.vue
+ * Remark: element table
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 9:55:27 am
+ * Last Modified: Tuesday, 19th March 2019 9:55:34 am
+ * Modified By: 任超
+ */
+
+<template>
+  <div :class="['lb-table', customClass]">
+    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
+      :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
+      :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
+      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+      <el-table-column width="45" align="center" v-if="isRadio">
+        <template slot-scope="scope">
+          <el-radio v-model="selected" :label="scope.$index"></el-radio>
+        </template>
+      </el-table-column>
+
+      <el-table-column :label="downTitle" align="center">
+        <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
+        </lb-column>
+      </el-table-column>
+    </el-table>
+    <br>
+    <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
+      layout="total,  prev, pager, next" @current-change="paginationCurrentChange"
+      :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import LbColumn from './LbColumn'
+export default {
+  props: {
+    column: Array,
+    data: Array,
+    spanMethod: Function,
+    pagination: {
+      type: Boolean,
+      default: true,
+    },
+    downExcel: {
+      type: Boolean,
+      default: false,
+    },
+    downTitle: {
+      type: String,
+      default: '标题'
+    },
+    isRadio: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    paginationTop: {
+      type: String,
+      default: '0',
+    },
+    heightNum: {
+      type: Number,
+      default: 355,
+    },
+    maxHeight: {
+      type: Number,
+      default: 500
+    },
+    heightNumSetting: {
+      type: Boolean,
+      default: false,
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+    paginationAlign: {
+      type: String,
+      default: 'left',
+    },
+    merge: Array,
+  },
+  components: {
+    LbColumn,
+  },
+  data () {
+    return {
+      tableHeight: 'auto',
+      mergeLine: {},
+      mergeIndex: {},
+      selected: ''
+    }
+  },
+  created () {
+    this.getMergeArr(this.data, this.merge)
+    this.getHeight()
+  },
+  computed: {
+    dataLength () {
+      return [] || this.data.length
+    },
+  },
+  methods: {
+    // 单选
+    singleElection (row) {
+      this.selected = this.data.indexOf(row);
+    },
+
+    tableRowClassName ({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'interlaced';
+      }
+    },
+    getHeight () {
+      if (!this.heightNumSetting) {
+        let _this = this
+        if (this.heightNum) {
+          _this.$nextTick(() => {
+
+            window.addEventListener('resize', () => {
+              _this.tableHeight = _this.calcHeightx(230)
+            });
+            _this.tableHeight = _this.calcHeightx(230)
+          })
+        } else {
+          _this.tableHeight = window.innerHeight - _this.heightNum
+        }
+      }
+    },
+    calcHeightx (value, wappered = true) {
+      //项目自定义的公共header部分的高度，可忽略
+      let header = document.querySelector(".from-clues-header").offsetHeight;
+      //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
+      value = value == undefined ? 100 : value;
+      let res = window.innerHeight - parseInt(header) - value;
+      if (wappered) {
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
+        let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
+        let header = window.document.getElementsByClassName('el-table__header-wrapper');
+        //必须加延时，要不然赋不上去值
+        setTimeout(() => {
+          //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
+          wapper[0].style.height = (value - header[0].clientHeight)
+        }, 100)
+      }
+      return res;
+    },
+    clearSelection () {
+      this.$refs.elTable.clearSelection()
+    },
+    toggleRowSelection (row, selected) {
+      this.$refs.elTable.toggleRowSelection(row, selected)
+    },
+    toggleAllSelection () {
+      this.$refs.elTable.toggleAllSelection()
+    },
+    toggleRowExpansion (row, expanded) {
+      this.$refs.elTable.toggleRowExpansion(row, expanded)
+    },
+    setCurrentRow (row) {
+      this.$refs.elTable.setCurrentRow(row)
+    },
+    clearSort () {
+      this.$refs.elTable.clearSort()
+    },
+    clearFilter (columnKey) {
+      this.$refs.elTable.clearFilter(columnKey)
+    },
+    doLayout () {
+      this.$refs.elTable.doLayout()
+    },
+    sort (prop, order) {
+      this.$refs.elTable.sort(prop, order)
+    },
+    paginationCurrentChange (val) {
+      this.$emit('p-current-change', val)
+    },
+    getMergeArr (tableData, merge) {
+      if (!merge) return
+      this.mergeLine = {}
+      this.mergeIndex = {}
+      merge.forEach((item, k) => {
+        tableData.forEach((data, i) => {
+          if (i === 0) {
+            this.mergeIndex[item] = this.mergeIndex[item] || []
+            this.mergeIndex[item].push(1)
+            this.mergeLine[item] = 0
+          } else {
+            if (data[item] === tableData[i - 1][item]) {
+              this.mergeIndex[item][this.mergeLine[item]] += 1
+              this.mergeIndex[item].push(0)
+            } else {
+              this.mergeIndex[item].push(1)
+              this.mergeLine[item] = i
+            }
+          }
+        })
+      })
+    },
+    mergeMethod ({ row, column, rowIndex, columnIndex }) {
+      const index = this.merge.indexOf(column.property)
+      if (index > -1) {
+        const _row = this.mergeIndex[this.merge[index]][rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col,
+        }
+      }
+    },
+  },
+  watch: {
+    merge () {
+      this.getMergeArr(this.data, this.merge)
+    },
+    dataLength () {
+      this.getMergeArr(this.data, this.merge)
+    }
+  },
+}
+</script>
+<style  rel="stylesheet/scss" scoped lang="scss">
+.lb-table {
+  margin-top: 1px;
+
+  .interlaced {
+    background: #fafcff;
+    border: 1px solid #ebf2fa;
+  }
+}
+
+/deep/.el-table .cell {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+/deep/.el-radio__label {
+  display: none;
+}
+</style>

+## 这是对于element-table 进行的二次封装 
+
+### 文档地址
+
+<!-- table 已经全局注册不需要每个页面单独注册 -->
+
+[Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)