eoss-mobiles 0.3.95 → 0.3.97

package/packages/table/src/main.vue

@@ -1,1006 +1,1006 @@
-<script>
-import { Table } from 'element-ui';
-import 'element-ui/lib/theme-chalk/table.css';
-import request from 'eoss-mobile/src/utils/http';
-import util from 'eoss-mobile/src/utils/util';
-export default {
-  name: 'EmTable',
-  components: { Table },
-  inheritAttrs: false,
-  props: {
-    navHeight: {
-      type: [String, Number],
-      default: 20
-    },
-    thead: {
-      type: Array,
-      default: () => []
-    },
-    openEnlarge: {
-      type: Boolean,
-      default: false
-    },
-    enlargeColor: {
-      type: String,
-      default: '#fff'
-    },
-    enlargeSize: {
-      type: [String, Number],
-      default: 18
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    checkbox: {
-      type: Boolean,
-      default: false
-    },
-    // 开启分页
-    page: {
-      type: [Boolean, Object],
-      default() {
-        return false;
-      }
-    },
-    numbers: {
-      type: Boolean,
-      default: false
-    },
-    selectable: Function,
-    reserveSelection: Boolean,
-    full: {
-      type: Boolean,
-      default: true
-    },
-    height: [Number, String],
-    maxHeight: [Number, String],
-    form: {
-      type: Boolean,
-      default: false
-    },
-    optionData: Object,
-    //本地数据总条数差值
-    lose: {
-      type: Number,
-      default: 0
-    },
-    param: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    method: {
-      type: String,
-      default: 'get'
-    },
-    format: {
-      type: Boolean,
-      default: true
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    labelKey: {
-      type: String,
-      default: 'title'
-    },
-    valueKey: {
-      type: String,
-      default: 'field'
-    },
-    // 默认选中,类型为Boolean时默认全(不)选
-    checked: {
-      type: [Boolean, Array],
-      default: false
-    },
-    isForm: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      selected: null,
-      pageChange: false,
-      tableHeight: 'auto',
-      tableClientHeight: undefined,
-      validateSuccess: true,
-      options: {},
-      theadData: [],
-      errForm: [],
-      isEnlarge: false,
-      clientWidth: document.documentElement.clientWidth,
-      list: null,
-      wheres: {},
-      config: {
-        pageNum: 1,
-        pageSize: 20,
-        totalCount: 0
-      },
-      isFirsetCheck: false
-    };
-  },
-  watch: {
-    checked(newVal) {
-      this.checkSelect(newVal);
-    },
-    page: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.config = util.extend({}, this.config, this.page);
-      }
-    },
-    thead: {
-      immediate: true,
-      handler(val) {
-        if (typeof val === 'string') {
-          this.getTheads();
-        }
-      }
-    },
-    height: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.tableHeight = val;
-        }
-      }
-    },
-    maxHeight: {
-      immediate: true,
-      handler(val) {
-        if (val && this.height === undefined) {
-          this.tableHeight = val;
-        }
-      }
-    },
-    param:{
-      immediate:true,
-      deep:true,
-      handler(val){
-        
-        this.getTableData({ where: this.wheres, first: true })
-      }
-    }
-  },
-  mounted() {
-    // this.resetHeight();
-    this.getTableData();
-    this.checkSelect(this.checked);
-    if (!this.isForm) {
-      this.$nextTick(() => {
-        this.tableClientHeight = this.$refs.emTable.clientHeight - 40;
-      });
-    }
-    if (this.full && !this.height) {
-      this.$nextTick(() => {
-        this.tableClientHeight = this.page?this.$refs.emTable.clientHeight - 40 : this.$refs.emTable.clientHeight;
-        // this. = this.$refs.emTable.clientHeight - 40;
-      });
-    }
-  },
-  computed: {
-    theads() {
-      return typeof this.thead === 'string' ? this.theadData : this.thead;
-    },
-    optionDatas() {
-      return this.optionData ? this.optionData : this.options;
-    },
-    datas: {
-      get() {
-        if (this.list) {
-          return this.list;
-        }
-        if (
-          this.page &&
-          this.data &&
-          this.data.length &&
-          this.config.totalCount < this.data.length + 1
-        ) {
-          this.config.totalCount = this.data.length - this.lose;
-          return this.data.filter((item, index) => {
-            return (
-              index > (this.config.pageNum - 1) * this.config.pageSize - 1 &&
-              index < this.config.pageNum * this.config.pageSize
-            );
-          });
-        }
-
-        return this.data;
-      },
-      set(val) {
-        return val;
-      }
-    }
-  },
-  methods: {
-    validValue(val) {
-      val && this.$toast(val);
-      this.validateSuccess = !val;
-    },
-    validate() {
-      let success = true;
-      const _that = this;
-      if (_that.form) {
-        _that.theads.map(item => {
-          if (item.rules && item.rules.required) {
-            this.datas.map(x => {
-              if (!x[item.field] && !item.rules.validator) {
-                _that.$toast(item.rules.message);
-                success = false;
-              } else if (item.rules.validator) {
-                item.rules.validator(x[item.field], _that.validValue);
-                success = _that.validateSuccess;
-              }
-            });
-          }
-        });
-      }
-      return success;
-    },
-    toggleAllSelection() {
-      this.$refs.oaTable.toggleAllSelection();
-    },
-    toggleRowSelection(newVal) {
-      newVal.forEach(row => {
-        this.$refs.oaTable.toggleRowSelection(row, true);
-      });
-    },
-    checkSelect(newVal) {
-      if (!this.isFirsetCheck && newVal) {
-        if (util.getObjectType(newVal) === 'array') {
-          newVal.forEach(row => {
-            this.$refs.oaTable.toggleRowSelection(row, true);
-          });
-        } else if (newVal === true) {
-          this.toggleAllSelection();
-        }
-        this.isFirsetCheck = true;
-      }
-    },
-    getTableData(res) {
-      let where;
-      let first;
-      if (res) {
-        where = res.where;
-        first = res.first;
-      }
-      if (!this.url) {
-        return;
-      }
-      if (first !== false) {
-        this.config.pageNum = 1;
-      }
-      this.$toast.loading({
-        message: '加载中...',
-        forbidClick: true,
-        loadingType: 'spinner',
-        overlay: true,
-        duration: 0
-      });
-      let reqData = util.extend({}, this.param, {
-        pageNum: this.config.pageNum,
-        pageSize: this.config.pageSize
-      });
-      if (where) {
-        reqData = util.extend({}, reqData, where);
-      }
-      request({
-          url: this.url,
-          method: this.method,
-          format: this.format,
-          params: reqData,
-          data: reqData
-        })
-        .then(res => {
-          if (res.rCode === 0 || res.status === 'success') {
-            let results =
-              this.parseData !== undefined
-                ? this.parseData(res.results || res.data || res)
-                : res.results || res.data;
-            this.list = results.data || results.records || results.list || [];
-            this.config.totalCount =
-              results.count || results.total || results.totalCount;
-          } else {
-            this.list = [];
-          }
-          this.$toast.clear();
-          this.$emit('success', res);
-        })
-        .catch(err => {
-          this.$toast.clear();
-          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
-            return;
-          }
-          if (util.getObjectType(err) === 'string') {
-            this.$toast(err);
-          } else {
-            this.$toast(err.message || '数据加载失败，请联系管理员！');
-          }
-        });
-    },
-    clickOpenEnlarge(){
-      this.isEnlarge = true;
-      this.$emit('enlarge-change',true);
-    },
-    currentChange(res) {
-      this.pageChange = true;
-      setTimeout(() => {
-        this.pageChange = false;
-      }, 10);
-      this.config.pageNum = res;
-      this.$emit('page-current-change', res);
-      if (this.url) {
-        this.getTableData({ where: this.wheres, first: false });
-      }
-    },
-    getTheads() {
-      request({
-          url: this.thead,
-          method: this.method,
-          format: this.format,
-          params: this.param,
-          data: this.param
-        })
-        .then(res => {
-          if (res.rCode === 0) {
-            let results = res.results;
-            if (Array.isArray(results)) {
-              this.theadData = results;
-            } else {
-              this.theadData = results.theadData || [];
-              this.list = results.data || results.records || [];
-              this.config.totalCount =
-                results.count || results.total || results.totalCount;
-            }
-          } else {
-            this.theadData = [];
-          }
-          this.$emit('success', res);
-        })
-        .catch(err => {
-          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
-            return;
-          }
-          if (util.getObjectType(err) === 'string') {
-            this.$message.error(err);
-          } else {
-            this.$message.error(err.message || '数据加载失败，请联系管理员！');
-          }
-        });
-    },
-    getTableColumns(data, name) {
-      this.optionDatas[name] = data;
-    },
-    formBlur(data) {
-      this.$emit('blur', data, this.datas);
-    },
-    formFocus(data) {
-      this.$emit('focus', data, this.datas);
-    },
-    formChange(data) {
-      if (this.pageChange) return;
-      if (data.type) {
-        this.pageChange = true;
-        setTimeout(() => {
-          this.pageChange = false;
-        }, 20);
-      }
-      this.$emit('edit', data, this.datas);
-    },
-    resetHeight() {
-      this.$nextTick(() => {
-        if (this.full && !this.height && !this.maxHeight) {
-          let height =
-            this.$el.parentNode.offsetHeight -
-            parseInt(util.getStyle(this.$el.parentNode, 'paddingTop'), 10) -
-            parseInt(util.getStyle(this.$el.parentNode, 'paddingBottom'), 10);
-          for (let i = 0; i < this.$el.parentNode.childNodes.length; i++) {
-            let ele = this.$el.parentNode.childNodes[i];
-            if (ele !== this.$el) {
-              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
-            }
-          }
-          for (let i = 0; i < this.$el.childNodes.length; i++) {
-            let ele = this.$el.childNodes[i];
-            if (ele !== this.$refs.esTableContent) {
-              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
-            }
-          }
-          this.styles = { height: height + 'px' };
-          const loadingDom = this.$refs.esTableContent.querySelector(
-            '.el-loading-mask'
-          );
-          for (
-            let i = 0;
-            i < this.$refs.esTableContent.childNodes.length;
-            i++
-          ) {
-            let ele = this.$refs.esTableContent.childNodes[i];
-            if (
-              ele !== this.$refs.oaTable.$el &&
-              (!loadingDom || ele !== loadingDom)
-            ) {
-              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
-            }
-          }
-          let pt = parseInt(
-            util.getStyle(this.$refs.esTableContent, 'paddingTop'),
-            10
-          );
-          let pb = parseInt(
-            util.getStyle(this.$refs.esTableContent, 'paddingBottom'),
-            10
-          );
-          this.tableHeight = height - pt - pb + (this.page ? 2 : 1) + 'px';
-        }
-      });
-    },
-    handleAjax(handle, row) {
-      this.$toast.loading({
-        message: '加载中...',
-        forbidClick: true,
-        loadingType: 'spinner',
-        overlay: true,
-        duration: 0
-      });
-      let params = handle.param || {};
-      if (handle.syncKeys) {
-        if (typeof handle.syncKeys === 'string') {
-          params[handle.syncKeys] = row[handle.syncKeys];
-        } else if (Array.isArray(handle.syncKeys)) {
-          for (let i in handle.syncKeys) {
-            if (Array.isArray(row)) {
-              let param = row.map(item => {
-                return item[handle.syncKeys[i]];
-              });
-              params[handle.syncKeys[i]] = param.join(',');
-            } else {
-              params[handle.syncKeys[i]] = row[handle.syncKeys[i]];
-            }
-          }
-        } else {
-          for (let i in handle.syncKeys) {
-            if (Array.isArray(row)) {
-              let param = row.map(item => {
-                return item[handle.syncKeys[i]];
-              });
-              params[i] = param.join(',');
-            } else {
-              params[i] = row[handle.syncKeys[i]];
-            }
-          }
-        }
-      } else {
-        if (Array.isArray(row)) {
-          let param = row.map(item => {
-            return item.id;
-          });
-          params.id = param.join(',');
-        } else {
-          params.id = row.id;
-        }
-      }
-      let keys = Object.keys(params);
-      request({
-        url: handle.action,
-        data:
-          keys.length == 1 && handle.format === false
-            ? params[keys[0]].split(',')
-            : params,
-        params:
-          keys.length == 1 && handle.format === false
-            ? params[keys[0]].split(',')
-            : params,
-        method: handle.method,
-        format: handle.format
-      })
-        .then(res => {
-          this.$toast.clear();
-          if (res.rCode === 0) {
-            this.$message({
-              message: `${handle.text}成功`,
-              duration: 2000,
-              type: 'success',
-              onClose: () => {
-                let first = Object.prototype.hasOwnProperty.call(
-                  handle,
-                  'first'
-                )
-                  ? handle.first
-                  : false;
-                let reload = handle.reload || true;
-                if (reload) {
-                  this.reload({}, first);
-                }
-              }
-            });
-          } else {
-            this.$toast(res.msg || `${handle.text}失败，请联系管理员！`);
-          }
-        })
-        .catch(() => {});
-    },
-    handleClick(res) {
-      let { row, handle } = res;
-      let rows;
-      if (handle.checkbox) {
-        if (!this.selected || !this.selected.length) {
-          this.$alert('请选择数据', '提示', { type: 'warning' });
-          return;
-        } else {
-          row = this.selected;
-        }
-      }
-      if (this.checkboxParseData) {
-        rows = this.checkboxParseData(JSON.parse(JSON.stringify(row)));
-      } else if (this.checkboxParse) {
-        rows = this.checkParse(row, this.checkboxParse);
-      } else if (handle.checkboxParse) {
-        rows = this.checkParse(row, handle.checkboxParse);
-      } else if (row) {
-        rows = JSON.parse(JSON.stringify(row));
-      }
-      let thead = this.thead;
-      if (this.$refs.oaTable) {
-        thead = this.$refs.oaTable.getThead();
-      }
-      if (handle.action) {
-        let isConfirm = handle.confirm || true;
-        if (isConfirm) {
-          let msg = handle[this.valueKey] ? row[handle[this.valueKey]] : '';
-          this.$dialog
-            .confirm({
-              message: `确定要${handle.text}${msg}吗`,
-              title: '提示',
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            })
-            .then(() => {
-              this.handleAjax(handle, rows);
-            })
-            .catch(() => {});
-        } else {
-          this.handleAjax(handle, rows);
-        }
-      } else if (handle.event) {
-        if (typeof handle.event === 'function') {
-          handle.event({
-            ele: this,
-            thead: thead,
-            data: this.datas,
-            ...res
-          });
-        } else if (
-          handle.event === 'add' ||
-          handle.event === 'edit' ||
-          handle.event === 'look'
-        ) {
-          let changes = {
-            event: handle.event,
-            title: handle[this.labelKey] || handle.text,
-            values: handle.event === 'add' ? {} : rows,
-            readonly: handle.event === 'look',
-            actionType: handle.actionType
-              ? handle.actionType
-              : handle.event === 'add'
-              ? 'save'
-              : 'update'
-          };
-          if (handle.dialog && this.$parent.$attrs[handle.dialog]) {
-            this.$parent.$attrs[handle.dialog].handleShow();
-          } else {
-            changes['visible'] = true;
-          }
-          if (handle.tabs) {
-            this.esTabs && this.esTabs.handleChangeData(changes);
-          } else if (handle.flowGroup) {
-            this.esFlowGroup && this.esFlowGroup.handleChangeData(changes);
-          } else {
-            this.esPage && this.esPage.handleChangeData(changes);
-          }
-        }
-      } else if (handle.changeData) {
-        let changeData = {};
-        if (Array.isArray(handle.changeData)) {
-          handle.changeData.forEach(item => {
-            if (util.isObject(item)) {
-              for (let i in item) {
-                if (typeof item[i] === 'boolean') {
-                  changeData[i] = item[i];
-                } else {
-                  changeData[i] = handle[item[i]] || item[i];
-                }
-              }
-            } else {
-              changeData[item] =
-                handle[item] || (Array.isArray(rows) ? rows : rows[item]);
-            }
-          });
-        } else {
-          for (let i in handle.changeData) {
-            let item = handle.changeData[i];
-            if (util.isObject(item)) {
-              let obj = {};
-              for (let e in item) {
-                obj[e] =
-                  handle[item[e]] ||
-                  (Array.isArray(rows) ? rows : rows[item[e]]);
-              }
-              changeData[i] = obj;
-            } else {
-              if (typeof item === 'boolean') {
-                changeData[i] = item;
-              } else {
-                changeData[i] =
-                  handle[item] || (Array.isArray(rows) ? rows : rows[item]);
-              }
-            }
-          }
-        }
-        if (handle.actionType) {
-          changeData['actionType'] = handle.actionType;
-        }
-        if (handle.tabs) {
-          this.esTabs && this.esTabs.handleChangeData(changeData);
-        } else if (handle.flowGroup) {
-          this.esFlowGroup && this.esFlowGroup.handleChangeData(changeData);
-        } else {
-          this.esPage && this.esPage.handleChangeData(changeData);
-        }
-      } else {
-        if (handle.exportXls) {
-          let text = '操作';
-          if (
-            this.thead[this.thead.length - 1] &&
-            this.thead[this.thead.length - 1].type === 'handle'
-          ) {
-            text = this.thead[this.thead.length - 1][this.labelKey];
-          }
-          thead = thead.map(item => {
-            return item.filter(ele => {
-              return ele.label !== text && ele.label;
-            });
-          });
-          util.exportXls({
-            thead: thead,
-            data: this.datas,
-            name: this.fileName
-          });
-        }
-        this.$emit('btnClick', res, this.datas, thead);
-        this.$emit('btn-click', res, this.datas, thead);
-      }
-    },
-    selectionChange(data) {
-      this.selected = JSON.parse(JSON.stringify(data));
-      this.$emit('selection-change', data);
-    },
-    rowClick(row, column, event) {
-      this.$emit('click', row, column, event);
-      this.$emit('row-click', row, column, event);
-    },
-    getChildrens(h, items) {
-      let doms = [];
-      items.childHead.forEach((item, index) => {
-        if (!item.hide) {
-          let childs = [];
-          if (item.childHead && item.childHead.length) {
-            childs = this.getChildrens(h, item);
-          }
-          doms.push(
-            h(
-              'em-table-column',
-              {
-                ref: 'emTableColum',
-                props: {
-                  name: this.name,
-                  item: item,
-                  prop: item[this.valueKey],
-                  label: item[this.labelKey],
-                  width: item.width,
-                  index: index + 1000,
-                  readonly: this.readonly,
-                  optionData: this.optionDatas,
-                  form: this.form,
-                  minWidth: this.minWidth
-                },
-                on: {
-                  handleClick: this.handleClick,
-                  formBlur: this.formBlur,
-                  formFocus: this.formFocus,
-                  tableColumns: this.getTableColumns,
-                  formChange: this.formChange
-                }
-              },
-              childs
-            )
-          );
-        }
-      });
-      return doms;
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 === 0) {
-        return 'em-row';
-      }
-      return '';
-    },
-    tableHeader() {
-      return 'em-table-header';
-    }
-  },
-  render(h) {
-    let tag = 'div';
-    let dom = [];
-    if (this.$slots.prepend) {
-      dom.push(this.$slots.prepend);
-    }
-    if (this.$slots.default) {
-      dom.push(this.$slots.default);
-    }
-    // 开启多选
-    if (this.checkbox) {
-      dom.push(
-        h('el-table-column', {
-          props: {
-            type: 'selection',
-            width: '55',
-            align: 'center',
-            fixed: 'left',
-            selectable: this.selectable,
-            reserveSelection: this.reserveSelection
-          }
-        })
-      );
-    }
-    // 开启索引
-    if (this.numbers) {
-      dom.push(
-        h('el-table-column', {
-          props: {
-            type: 'index',
-            label: '序号',
-            width: '60',
-            align: 'center',
-            fixed: 'left'
-          }
-        })
-      );
-    }
-    this.theads.forEach((items, indexs) => {
-      if (
-        items.type &&
-        (items.type === 'selection' || items.type === 'index')
-      ) {
-        if (items.type === 'index') {
-          dom.push(
-            h('em-table-column', {
-              ref: 'emTableColum',
-              props: util.extend(
-                {},
-                {
-                  type: 'index',
-                  label: '序号',
-                  width: '60',
-                  align: 'center',
-                  fixed: 'left'
-                },
-                items
-              ),
-
-              key: indexs
-            })
-          );
-        } else {
-          dom.push(
-            h('em-table-column', {
-              ref: 'emTableColum',
-              props: util.extend(
-                {},
-                {
-                  type: 'selection',
-                  width: '55',
-                  align: 'center',
-                  fixed: 'left'
-                },
-                items
-              ),
-
-              key: indexs
-            })
-          );
-        }
-      } else if (!items.hide) {
-        let tds = [];
-        if (items.childHead && items.childHead.length) {
-          tds = this.getChildrens(h, items);
-        }
-        dom.push(
-          h(
-            'em-table-column',
-            {
-              ref: 'emTableColum',
-              props: {
-                name: this.name,
-                prop: items[this.valueKey],
-                label: items[this.labelKey],
-                item: items,
-                width: items.width,
-                index: indexs,
-                readonly: this.readonly,
-                optionData: this.optionDatas,
-                form: this.form,
-                minWidth: this.minWidth
-              },
-              on: {
-                handleClick: this.handleClick,
-                formBlur: this.formBlur,
-                formFocus: this.formFocus,
-                tableColumns: this.getTableColumns,
-                formChange: this.formChange
-              },
-              key: indexs
-            },
-            tds
-          )
-        );
-      }
-    });
-    let tableContents = [];
-    if (!this.isEnlarge) {
-      tableContents.push(
-        h(
-          'el-table',
-          {
-            // ref: ref,
-            class: `em-table`,
-            attrs: {
-              'row-class-name': this.tableRowClassName,
-              'header-row-class-name': this.tableHeader,
-              data: this.datas,
-              ...this.$attrs,
-              'max-height': this.maxHeight,
-              height:
-                this.tableHeight !== 'auto'
-                  ? this.tableHeight
-                  : this.tableClientHeight
-            },
-            on: {
-              ...this.$listeners,
-              'row-click': this.rowClick,
-              'selection-change': this.selectionChange
-            },
-            ref: 'oaTable'
-          },
-          dom
-        )
-      );
-      if (this.openEnlarge) {
-        tableContents.push(
-          h('i', {
-            class: 'iconfont em-fangda em-table-icon',
-            style: {
-              fontSize: this.enlargeSize + 'px',
-              color: this.enlargeColor
-            },
-            on: {
-              click: () => {
-                this.clickOpenEnlarge()
-              }
-            }
-          })
-        );
-      }
-    } else {
-      tableContents.push(
-        h(
-          'div',
-          {
-            class: 'em-table-isEnlarge',
-            style: {
-              'transform-origin':
-                this.clientWidth / 2 + 'px ' + this.clientWidth / 2 + 'px'
-            }
-          },
-          [
-            h(
-              'el-table',
-              {
-                // ref: ref,
-                class: `em-table`,
-                attrs: {
-                  'row-class-name': this.tableRowClassName,
-                  'header-row-class-name': this.tableHeader,
-                  data: this.datas,
-                  ...this.$attrs,
-                  'max-height': this.maxHeight,
-                  height: this.page ? '90vw' : '100vw'
-                },
-                style: {
-                  overflow: 'auto',
-                  marginLeft: this.navHeight + 'px',
-                  width: `calc(100% - ${this.navHeight}px)`
-                },
-                on: {
-                  ...this.$listeners,
-                  'row-click': this.rowClick,
-                  'selection-change': this.selectionChange
-                },
-                ref: 'oaTable'
-              },
-              dom
-            ),
-            this.page
-              ? h('em-pagination', {
-                  attrs: {
-                    ...this.config
-                    // pageNum: this.config.pageNum,
-                    // pageSize: this.config.pageSize,
-                    // totalCount: this.config.totalCount
-                  },
-                  class: 'em-table-page',
-                  style: {
-                    'text-align': this.page.position || 'center',
-                    background: '#fff'
-                  },
-                  on: {
-                    change: this.currentChange
-                  }
-                })
-              : '',
-            h('i', {
-              class: 'iconfont em-guanbi em-table-icon',
-              style: {
-                fontSize: this.enlargeSize + 'px',
-                color: this.enlargeColor
-              },
-              on: {
-                click: () => {
-                  this.isEnlarge = false;
-                  this.$emit('enlarge-change',false);
-                }
-              }
-            })
-          ]
-        )
-      );
-    }
-
-    if (this.page && !this.isEnlarge) {
-      tableContents.push(
-        h('em-pagination', {
-          attrs: {
-            ...this.config
-            // pageNum: this.config.pageNum,
-            // pageSize: this.config.pageSize,
-            // totalCount: this.config.totalCount
-          },
-          class: 'em-table-page',
-          style: { 'text-align': this.page.position || 'center' },
-          on: {
-            change: this.currentChange
-          }
-        })
-      );
-    }
-    return h(
-      'div',
-      {
-        ref: 'emTable',
-        class: 'em-table-box',
-        style: {
-          height: '100%',
-          position: 'relative'
-        }
-      },
-      tableContents
-    );
-  }
-};
-</script>
+<script>
+import { Table } from 'element-ui';
+import 'element-ui/lib/theme-chalk/table.css';
+import request from 'eoss-mobile/src/utils/http';
+import util from 'eoss-mobile/src/utils/util';
+export default {
+  name: 'EmTable',
+  components: { Table },
+  inheritAttrs: false,
+  props: {
+    navHeight: {
+      type: [String, Number],
+      default: 20
+    },
+    thead: {
+      type: Array,
+      default: () => []
+    },
+    openEnlarge: {
+      type: Boolean,
+      default: false
+    },
+    enlargeColor: {
+      type: String,
+      default: '#fff'
+    },
+    enlargeSize: {
+      type: [String, Number],
+      default: 18
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    checkbox: {
+      type: Boolean,
+      default: false
+    },
+    // 开启分页
+    page: {
+      type: [Boolean, Object],
+      default() {
+        return false;
+      }
+    },
+    numbers: {
+      type: Boolean,
+      default: false
+    },
+    selectable: Function,
+    reserveSelection: Boolean,
+    full: {
+      type: Boolean,
+      default: true
+    },
+    height: [Number, String],
+    maxHeight: [Number, String],
+    form: {
+      type: Boolean,
+      default: false
+    },
+    optionData: Object,
+    //本地数据总条数差值
+    lose: {
+      type: Number,
+      default: 0
+    },
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    format: {
+      type: Boolean,
+      default: true
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    labelKey: {
+      type: String,
+      default: 'title'
+    },
+    valueKey: {
+      type: String,
+      default: 'field'
+    },
+    // 默认选中,类型为Boolean时默认全(不)选
+    checked: {
+      type: [Boolean, Array],
+      default: false
+    },
+    isForm: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selected: null,
+      pageChange: false,
+      tableHeight: 'auto',
+      tableClientHeight: undefined,
+      validateSuccess: true,
+      options: {},
+      theadData: [],
+      errForm: [],
+      isEnlarge: false,
+      clientWidth: document.documentElement.clientWidth,
+      list: null,
+      wheres: {},
+      config: {
+        pageNum: 1,
+        pageSize: 20,
+        totalCount: 0
+      },
+      isFirsetCheck: false
+    };
+  },
+  watch: {
+    checked(newVal) {
+      this.checkSelect(newVal);
+    },
+    page: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.config = util.extend({}, this.config, this.page);
+      }
+    },
+    thead: {
+      immediate: true,
+      handler(val) {
+        if (typeof val === 'string') {
+          this.getTheads();
+        }
+      }
+    },
+    height: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.tableHeight = val;
+        }
+      }
+    },
+    maxHeight: {
+      immediate: true,
+      handler(val) {
+        if (val && this.height === undefined) {
+          this.tableHeight = val;
+        }
+      }
+    },
+    param:{
+      immediate:true,
+      deep:true,
+      handler(val){
+        
+        this.getTableData({ where: this.wheres, first: true })
+      }
+    }
+  },
+  mounted() {
+    // this.resetHeight();
+    this.getTableData();
+    this.checkSelect(this.checked);
+    if (!this.isForm) {
+      this.$nextTick(() => {
+        this.tableClientHeight = this.$refs.emTable.clientHeight - 40;
+      });
+    }
+    if (this.full && !this.height) {
+      this.$nextTick(() => {
+        this.tableClientHeight = this.page?this.$refs.emTable.clientHeight - 40 : this.$refs.emTable.clientHeight;
+        // this. = this.$refs.emTable.clientHeight - 40;
+      });
+    }
+  },
+  computed: {
+    theads() {
+      return typeof this.thead === 'string' ? this.theadData : this.thead;
+    },
+    optionDatas() {
+      return this.optionData ? this.optionData : this.options;
+    },
+    datas: {
+      get() {
+        if (this.list) {
+          return this.list;
+        }
+        if (
+          this.page &&
+          this.data &&
+          this.data.length &&
+          this.config.totalCount < this.data.length + 1
+        ) {
+          this.config.totalCount = this.data.length - this.lose;
+          return this.data.filter((item, index) => {
+            return (
+              index > (this.config.pageNum - 1) * this.config.pageSize - 1 &&
+              index < this.config.pageNum * this.config.pageSize
+            );
+          });
+        }
+
+        return this.data;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  methods: {
+    validValue(val) {
+      val && this.$toast(val);
+      this.validateSuccess = !val;
+    },
+    validate() {
+      let success = true;
+      const _that = this;
+      if (_that.form) {
+        _that.theads.map(item => {
+          if (item.rules && item.rules.required) {
+            this.datas.map(x => {
+              if (!x[item.field] && !item.rules.validator) {
+                _that.$toast(item.rules.message);
+                success = false;
+              } else if (item.rules.validator) {
+                item.rules.validator(x[item.field], _that.validValue);
+                success = _that.validateSuccess;
+              }
+            });
+          }
+        });
+      }
+      return success;
+    },
+    toggleAllSelection() {
+      this.$refs.oaTable.toggleAllSelection();
+    },
+    toggleRowSelection(newVal) {
+      newVal.forEach(row => {
+        this.$refs.oaTable.toggleRowSelection(row, true);
+      });
+    },
+    checkSelect(newVal) {
+      if (!this.isFirsetCheck && newVal) {
+        if (util.getObjectType(newVal) === 'array') {
+          newVal.forEach(row => {
+            this.$refs.oaTable.toggleRowSelection(row, true);
+          });
+        } else if (newVal === true) {
+          this.toggleAllSelection();
+        }
+        this.isFirsetCheck = true;
+      }
+    },
+    getTableData(res) {
+      let where;
+      let first;
+      if (res) {
+        where = res.where;
+        first = res.first;
+      }
+      if (!this.url) {
+        return;
+      }
+      if (first !== false) {
+        this.config.pageNum = 1;
+      }
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        overlay: true,
+        duration: 0
+      });
+      let reqData = util.extend({}, this.param, {
+        pageNum: this.config.pageNum,
+        pageSize: this.config.pageSize
+      });
+      if (where) {
+        reqData = util.extend({}, reqData, where);
+      }
+      request({
+          url: this.url,
+          method: this.method,
+          format: this.format,
+          params: reqData,
+          data: reqData
+        })
+        .then(res => {
+          if (res.rCode === 0 || res.status === 'success') {
+            let results =
+              this.parseData !== undefined
+                ? this.parseData(res.results || res.data || res)
+                : res.results || res.data;
+            this.list = results.data || results.records || results.list || [];
+            this.config.totalCount =
+              results.count || results.total || results.totalCount;
+          } else {
+            this.list = [];
+          }
+          this.$toast.clear();
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          this.$toast.clear();
+          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
+            return;
+          }
+          if (util.getObjectType(err) === 'string') {
+            this.$toast(err);
+          } else {
+            this.$toast(err.message || '数据加载失败，请联系管理员！');
+          }
+        });
+    },
+    clickOpenEnlarge(){
+      this.isEnlarge = true;
+      this.$emit('enlarge-change',true);
+    },
+    currentChange(res) {
+      this.pageChange = true;
+      setTimeout(() => {
+        this.pageChange = false;
+      }, 10);
+      this.config.pageNum = res;
+      this.$emit('page-current-change', res);
+      if (this.url) {
+        this.getTableData({ where: this.wheres, first: false });
+      }
+    },
+    getTheads() {
+      request({
+          url: this.thead,
+          method: this.method,
+          format: this.format,
+          params: this.param,
+          data: this.param
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            let results = res.results;
+            if (Array.isArray(results)) {
+              this.theadData = results;
+            } else {
+              this.theadData = results.theadData || [];
+              this.list = results.data || results.records || [];
+              this.config.totalCount =
+                results.count || results.total || results.totalCount;
+            }
+          } else {
+            this.theadData = [];
+          }
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
+            return;
+          }
+          if (util.getObjectType(err) === 'string') {
+            this.$message.error(err);
+          } else {
+            this.$message.error(err.message || '数据加载失败，请联系管理员！');
+          }
+        });
+    },
+    getTableColumns(data, name) {
+      this.optionDatas[name] = data;
+    },
+    formBlur(data) {
+      this.$emit('blur', data, this.datas);
+    },
+    formFocus(data) {
+      this.$emit('focus', data, this.datas);
+    },
+    formChange(data) {
+      if (this.pageChange) return;
+      if (data.type) {
+        this.pageChange = true;
+        setTimeout(() => {
+          this.pageChange = false;
+        }, 20);
+      }
+      this.$emit('edit', data, this.datas);
+    },
+    resetHeight() {
+      this.$nextTick(() => {
+        if (this.full && !this.height && !this.maxHeight) {
+          let height =
+            this.$el.parentNode.offsetHeight -
+            parseInt(util.getStyle(this.$el.parentNode, 'paddingTop'), 10) -
+            parseInt(util.getStyle(this.$el.parentNode, 'paddingBottom'), 10);
+          for (let i = 0; i < this.$el.parentNode.childNodes.length; i++) {
+            let ele = this.$el.parentNode.childNodes[i];
+            if (ele !== this.$el) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          for (let i = 0; i < this.$el.childNodes.length; i++) {
+            let ele = this.$el.childNodes[i];
+            if (ele !== this.$refs.esTableContent) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          this.styles = { height: height + 'px' };
+          const loadingDom = this.$refs.esTableContent.querySelector(
+            '.el-loading-mask'
+          );
+          for (
+            let i = 0;
+            i < this.$refs.esTableContent.childNodes.length;
+            i++
+          ) {
+            let ele = this.$refs.esTableContent.childNodes[i];
+            if (
+              ele !== this.$refs.oaTable.$el &&
+              (!loadingDom || ele !== loadingDom)
+            ) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          let pt = parseInt(
+            util.getStyle(this.$refs.esTableContent, 'paddingTop'),
+            10
+          );
+          let pb = parseInt(
+            util.getStyle(this.$refs.esTableContent, 'paddingBottom'),
+            10
+          );
+          this.tableHeight = height - pt - pb + (this.page ? 2 : 1) + 'px';
+        }
+      });
+    },
+    handleAjax(handle, row) {
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        overlay: true,
+        duration: 0
+      });
+      let params = handle.param || {};
+      if (handle.syncKeys) {
+        if (typeof handle.syncKeys === 'string') {
+          params[handle.syncKeys] = row[handle.syncKeys];
+        } else if (Array.isArray(handle.syncKeys)) {
+          for (let i in handle.syncKeys) {
+            if (Array.isArray(row)) {
+              let param = row.map(item => {
+                return item[handle.syncKeys[i]];
+              });
+              params[handle.syncKeys[i]] = param.join(',');
+            } else {
+              params[handle.syncKeys[i]] = row[handle.syncKeys[i]];
+            }
+          }
+        } else {
+          for (let i in handle.syncKeys) {
+            if (Array.isArray(row)) {
+              let param = row.map(item => {
+                return item[handle.syncKeys[i]];
+              });
+              params[i] = param.join(',');
+            } else {
+              params[i] = row[handle.syncKeys[i]];
+            }
+          }
+        }
+      } else {
+        if (Array.isArray(row)) {
+          let param = row.map(item => {
+            return item.id;
+          });
+          params.id = param.join(',');
+        } else {
+          params.id = row.id;
+        }
+      }
+      let keys = Object.keys(params);
+      request({
+        url: handle.action,
+        data:
+          keys.length == 1 && handle.format === false
+            ? params[keys[0]].split(',')
+            : params,
+        params:
+          keys.length == 1 && handle.format === false
+            ? params[keys[0]].split(',')
+            : params,
+        method: handle.method,
+        format: handle.format
+      })
+        .then(res => {
+          this.$toast.clear();
+          if (res.rCode === 0) {
+            this.$message({
+              message: `${handle.text}成功`,
+              duration: 2000,
+              type: 'success',
+              onClose: () => {
+                let first = Object.prototype.hasOwnProperty.call(
+                  handle,
+                  'first'
+                )
+                  ? handle.first
+                  : false;
+                let reload = handle.reload || true;
+                if (reload) {
+                  this.reload({}, first);
+                }
+              }
+            });
+          } else {
+            this.$toast(res.msg || `${handle.text}失败，请联系管理员！`);
+          }
+        })
+        .catch(() => {});
+    },
+    handleClick(res) {
+      let { row, handle } = res;
+      let rows;
+      if (handle.checkbox) {
+        if (!this.selected || !this.selected.length) {
+          this.$alert('请选择数据', '提示', { type: 'warning' });
+          return;
+        } else {
+          row = this.selected;
+        }
+      }
+      if (this.checkboxParseData) {
+        rows = this.checkboxParseData(JSON.parse(JSON.stringify(row)));
+      } else if (this.checkboxParse) {
+        rows = this.checkParse(row, this.checkboxParse);
+      } else if (handle.checkboxParse) {
+        rows = this.checkParse(row, handle.checkboxParse);
+      } else if (row) {
+        rows = JSON.parse(JSON.stringify(row));
+      }
+      let thead = this.thead;
+      if (this.$refs.oaTable) {
+        thead = this.$refs.oaTable.getThead();
+      }
+      if (handle.action) {
+        let isConfirm = handle.confirm || true;
+        if (isConfirm) {
+          let msg = handle[this.valueKey] ? row[handle[this.valueKey]] : '';
+          this.$dialog
+            .confirm({
+              message: `确定要${handle.text}${msg}吗`,
+              title: '提示',
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+            .then(() => {
+              this.handleAjax(handle, rows);
+            })
+            .catch(() => {});
+        } else {
+          this.handleAjax(handle, rows);
+        }
+      } else if (handle.event) {
+        if (typeof handle.event === 'function') {
+          handle.event({
+            ele: this,
+            thead: thead,
+            data: this.datas,
+            ...res
+          });
+        } else if (
+          handle.event === 'add' ||
+          handle.event === 'edit' ||
+          handle.event === 'look'
+        ) {
+          let changes = {
+            event: handle.event,
+            title: handle[this.labelKey] || handle.text,
+            values: handle.event === 'add' ? {} : rows,
+            readonly: handle.event === 'look',
+            actionType: handle.actionType
+              ? handle.actionType
+              : handle.event === 'add'
+              ? 'save'
+              : 'update'
+          };
+          if (handle.dialog && this.$parent.$attrs[handle.dialog]) {
+            this.$parent.$attrs[handle.dialog].handleShow();
+          } else {
+            changes['visible'] = true;
+          }
+          if (handle.tabs) {
+            this.esTabs && this.esTabs.handleChangeData(changes);
+          } else if (handle.flowGroup) {
+            this.esFlowGroup && this.esFlowGroup.handleChangeData(changes);
+          } else {
+            this.esPage && this.esPage.handleChangeData(changes);
+          }
+        }
+      } else if (handle.changeData) {
+        let changeData = {};
+        if (Array.isArray(handle.changeData)) {
+          handle.changeData.forEach(item => {
+            if (util.isObject(item)) {
+              for (let i in item) {
+                if (typeof item[i] === 'boolean') {
+                  changeData[i] = item[i];
+                } else {
+                  changeData[i] = handle[item[i]] || item[i];
+                }
+              }
+            } else {
+              changeData[item] =
+                handle[item] || (Array.isArray(rows) ? rows : rows[item]);
+            }
+          });
+        } else {
+          for (let i in handle.changeData) {
+            let item = handle.changeData[i];
+            if (util.isObject(item)) {
+              let obj = {};
+              for (let e in item) {
+                obj[e] =
+                  handle[item[e]] ||
+                  (Array.isArray(rows) ? rows : rows[item[e]]);
+              }
+              changeData[i] = obj;
+            } else {
+              if (typeof item === 'boolean') {
+                changeData[i] = item;
+              } else {
+                changeData[i] =
+                  handle[item] || (Array.isArray(rows) ? rows : rows[item]);
+              }
+            }
+          }
+        }
+        if (handle.actionType) {
+          changeData['actionType'] = handle.actionType;
+        }
+        if (handle.tabs) {
+          this.esTabs && this.esTabs.handleChangeData(changeData);
+        } else if (handle.flowGroup) {
+          this.esFlowGroup && this.esFlowGroup.handleChangeData(changeData);
+        } else {
+          this.esPage && this.esPage.handleChangeData(changeData);
+        }
+      } else {
+        if (handle.exportXls) {
+          let text = '操作';
+          if (
+            this.thead[this.thead.length - 1] &&
+            this.thead[this.thead.length - 1].type === 'handle'
+          ) {
+            text = this.thead[this.thead.length - 1][this.labelKey];
+          }
+          thead = thead.map(item => {
+            return item.filter(ele => {
+              return ele.label !== text && ele.label;
+            });
+          });
+          util.exportXls({
+            thead: thead,
+            data: this.datas,
+            name: this.fileName
+          });
+        }
+        this.$emit('btnClick', res, this.datas, thead);
+        this.$emit('btn-click', res, this.datas, thead);
+      }
+    },
+    selectionChange(data) {
+      this.selected = JSON.parse(JSON.stringify(data));
+      this.$emit('selection-change', data);
+    },
+    rowClick(row, column, event) {
+      this.$emit('click', row, column, event);
+      this.$emit('row-click', row, column, event);
+    },
+    getChildrens(h, items) {
+      let doms = [];
+      items.childHead.forEach((item, index) => {
+        if (!item.hide) {
+          let childs = [];
+          if (item.childHead && item.childHead.length) {
+            childs = this.getChildrens(h, item);
+          }
+          doms.push(
+            h(
+              'em-table-column',
+              {
+                ref: 'emTableColum',
+                props: {
+                  name: this.name,
+                  item: item,
+                  prop: item[this.valueKey],
+                  label: item[this.labelKey],
+                  width: item.width,
+                  index: index + 1000,
+                  readonly: this.readonly,
+                  optionData: this.optionDatas,
+                  form: this.form,
+                  minWidth: this.minWidth
+                },
+                on: {
+                  handleClick: this.handleClick,
+                  formBlur: this.formBlur,
+                  formFocus: this.formFocus,
+                  tableColumns: this.getTableColumns,
+                  formChange: this.formChange
+                }
+              },
+              childs
+            )
+          );
+        }
+      });
+      return doms;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'em-row';
+      }
+      return '';
+    },
+    tableHeader() {
+      return 'em-table-header';
+    }
+  },
+  render(h) {
+    let tag = 'div';
+    let dom = [];
+    if (this.$slots.prepend) {
+      dom.push(this.$slots.prepend);
+    }
+    if (this.$slots.default) {
+      dom.push(this.$slots.default);
+    }
+    // 开启多选
+    if (this.checkbox) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            type: 'selection',
+            width: '55',
+            align: 'center',
+            fixed: 'left',
+            selectable: this.selectable,
+            reserveSelection: this.reserveSelection
+          }
+        })
+      );
+    }
+    // 开启索引
+    if (this.numbers) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            type: 'index',
+            label: '序号',
+            width: '60',
+            align: 'center',
+            fixed: 'left'
+          }
+        })
+      );
+    }
+    this.theads.forEach((items, indexs) => {
+      if (
+        items.type &&
+        (items.type === 'selection' || items.type === 'index')
+      ) {
+        if (items.type === 'index') {
+          dom.push(
+            h('em-table-column', {
+              ref: 'emTableColum',
+              props: util.extend(
+                {},
+                {
+                  type: 'index',
+                  label: '序号',
+                  width: '60',
+                  align: 'center',
+                  fixed: 'left'
+                },
+                items
+              ),
+
+              key: indexs
+            })
+          );
+        } else {
+          dom.push(
+            h('em-table-column', {
+              ref: 'emTableColum',
+              props: util.extend(
+                {},
+                {
+                  type: 'selection',
+                  width: '55',
+                  align: 'center',
+                  fixed: 'left'
+                },
+                items
+              ),
+
+              key: indexs
+            })
+          );
+        }
+      } else if (!items.hide) {
+        let tds = [];
+        if (items.childHead && items.childHead.length) {
+          tds = this.getChildrens(h, items);
+        }
+        dom.push(
+          h(
+            'em-table-column',
+            {
+              ref: 'emTableColum',
+              props: {
+                name: this.name,
+                prop: items[this.valueKey],
+                label: items[this.labelKey],
+                item: items,
+                width: items.width,
+                index: indexs,
+                readonly: this.readonly,
+                optionData: this.optionDatas,
+                form: this.form,
+                minWidth: this.minWidth
+              },
+              on: {
+                handleClick: this.handleClick,
+                formBlur: this.formBlur,
+                formFocus: this.formFocus,
+                tableColumns: this.getTableColumns,
+                formChange: this.formChange
+              },
+              key: indexs
+            },
+            tds
+          )
+        );
+      }
+    });
+    let tableContents = [];
+    if (!this.isEnlarge) {
+      tableContents.push(
+        h(
+          'el-table',
+          {
+            // ref: ref,
+            class: `em-table`,
+            attrs: {
+              'row-class-name': this.tableRowClassName,
+              'header-row-class-name': this.tableHeader,
+              data: this.datas,
+              ...this.$attrs,
+              'max-height': this.maxHeight,
+              height:
+                this.tableHeight !== 'auto'
+                  ? this.tableHeight
+                  : this.tableClientHeight
+            },
+            on: {
+              ...this.$listeners,
+              'row-click': this.rowClick,
+              'selection-change': this.selectionChange
+            },
+            ref: 'oaTable'
+          },
+          dom
+        )
+      );
+      if (this.openEnlarge) {
+        tableContents.push(
+          h('i', {
+            class: 'iconfont em-fangda em-table-icon',
+            style: {
+              fontSize: this.enlargeSize + 'px',
+              color: this.enlargeColor
+            },
+            on: {
+              click: () => {
+                this.clickOpenEnlarge()
+              }
+            }
+          })
+        );
+      }
+    } else {
+      tableContents.push(
+        h(
+          'div',
+          {
+            class: 'em-table-isEnlarge',
+            style: {
+              'transform-origin':
+                this.clientWidth / 2 + 'px ' + this.clientWidth / 2 + 'px'
+            }
+          },
+          [
+            h(
+              'el-table',
+              {
+                // ref: ref,
+                class: `em-table`,
+                attrs: {
+                  'row-class-name': this.tableRowClassName,
+                  'header-row-class-name': this.tableHeader,
+                  data: this.datas,
+                  ...this.$attrs,
+                  'max-height': this.maxHeight,
+                  height: this.page ? '90vw' : '100vw'
+                },
+                style: {
+                  overflow: 'auto',
+                  marginLeft: this.navHeight + 'px',
+                  width: `calc(100% - ${this.navHeight}px)`
+                },
+                on: {
+                  ...this.$listeners,
+                  'row-click': this.rowClick,
+                  'selection-change': this.selectionChange
+                },
+                ref: 'oaTable'
+              },
+              dom
+            ),
+            this.page
+              ? h('em-pagination', {
+                  attrs: {
+                    ...this.config
+                    // pageNum: this.config.pageNum,
+                    // pageSize: this.config.pageSize,
+                    // totalCount: this.config.totalCount
+                  },
+                  class: 'em-table-page',
+                  style: {
+                    'text-align': this.page.position || 'center',
+                    background: '#fff'
+                  },
+                  on: {
+                    change: this.currentChange
+                  }
+                })
+              : '',
+            h('i', {
+              class: 'iconfont em-guanbi em-table-icon',
+              style: {
+                fontSize: this.enlargeSize + 'px',
+                color: this.enlargeColor
+              },
+              on: {
+                click: () => {
+                  this.isEnlarge = false;
+                  this.$emit('enlarge-change',false);
+                }
+              }
+            })
+          ]
+        )
+      );
+    }
+
+    if (this.page && !this.isEnlarge) {
+      tableContents.push(
+        h('em-pagination', {
+          attrs: {
+            ...this.config
+            // pageNum: this.config.pageNum,
+            // pageSize: this.config.pageSize,
+            // totalCount: this.config.totalCount
+          },
+          class: 'em-table-page',
+          style: { 'text-align': this.page.position || 'center' },
+          on: {
+            change: this.currentChange
+          }
+        })
+      );
+    }
+    return h(
+      'div',
+      {
+        ref: 'emTable',
+        class: 'em-table-box',
+        style: {
+          height: '100%',
+          position: 'relative'
+        }
+      },
+      tableContents
+    );
+  }
+};
+</script>