eoss-ui 0.3.97

package/packages/data-table/src/main copy.vue

@@ -0,0 +1,1383 @@
+<script>
+import { findSysCode } from 'eoss-ui/src/config/api.js';
+import column from './column.vue';
+import sizer from './sizer.vue';
+import util from 'eoss-ui/src/utils/util';
+import bus from 'eoss-ui/src/utils/bus';
+export default {
+  name: 'EsDataTable',
+  inheritAttrs: false,
+  components: {
+    [column.name]: column,
+    [sizer.name]: sizer
+  },
+  provide() {
+    return {
+      table: this,
+      tableReload: this.reload
+    };
+  },
+  inject: {
+    elForm: {
+      default: ''
+    },
+    injector: {
+      default: ''
+    }
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    readonly: Boolean,
+    url: {
+      type: String,
+      default: ''
+    },
+    defaults: {
+      type: Boolean,
+      default: false
+    },
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    format: {
+      type: Boolean,
+      default: true
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 表格表单
+    form: {
+      type: Boolean,
+      default: false
+    },
+    name: String,
+    title: {
+      type: String,
+      default: ''
+    },
+    // 导出文件名
+    fileName: {
+      type: String,
+      default: ''
+    },
+    // 工具栏配置
+    toolbar: {
+      type: [Array, Boolean],
+      default: false
+    },
+    searchValue: Object,
+    advanceValue: Object,
+    // 是否开启序号
+    numbers: {
+      type: Boolean,
+      default: false
+    },
+    // 是否筛选列功能
+    filter: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启多选
+    checkbox: {
+      type: Boolean,
+      default: false
+    },
+    selectable: Function,
+    reserveSelection: Boolean,
+    // 默认选中,类型为Boolean时默认全(不)选
+    checked: {
+      type: [Boolean, Array],
+      default: false
+    },
+    sizer: {
+      type: Boolean,
+      default: true
+    },
+    // 无数据时显示的文本
+    text: {
+      type: String,
+      default: ''
+    },
+    // 无数据时显示的文本
+    emptyText: {
+      type: String,
+      default: ''
+    },
+    // 是否开启合计行区域
+    total: {
+      type: Boolean,
+      default: false
+    },
+    //本地数据总条数差值
+    lose: {
+      type: Number,
+      default: 0
+    },
+    // 合计行显示文本
+    totalText: {
+      type: String,
+      default: ''
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    sumText: {
+      type: String,
+      default: ''
+    },
+    // 开启分页
+    page: {
+      type: [Boolean, Object],
+      default() {
+        return false;
+      }
+    },
+    // 渲染树形数据指定field
+    treeKey: {
+      type: String,
+      default: ''
+    },
+    // 单元格配置
+    thead: {
+      type: [Array, String],
+      default() {
+        return [];
+      }
+    },
+    optionData: Object,
+    // 开启数据增加删除按钮
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    // 单元格点击事件
+    click: {
+      type: Boolean,
+      default: false
+    },
+    totalRow: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    parseData: Function,
+    close: Boolean,
+    full: {
+      type: Boolean,
+      default: true
+    },
+    height: [Number, String],
+    maxHeight: [Number, String],
+    response: Function,
+    minWidth: String,
+    border: {
+      type: Boolean,
+      default: false
+    },
+    theadBorder: {
+      type: Boolean,
+      default: true
+    },
+    checkboxParseData: Function,
+    checkboxParse: Object,
+    display: Boolean,
+    showFormBtn: {
+      type: Boolean,
+      default: true
+    },
+    index: {
+      type: [Boolean, Number],
+      default: 1
+    },
+    immediate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      theadData: [],
+      list: null,
+      tableLoading: this.loading,
+      tableLoadingText: '加载中...',
+      isFirsetCheck: false,
+      // 可修改表单的值
+      editValue: {},
+      restotalRow: null,
+      showTotal: false,
+      toolbars: [],
+      config: {
+        pageNum: 1,
+        pageSize: 20,
+        totalCount: 0
+      },
+      where: {},
+      wheres: {},
+      tableHeight: 'auto',
+      styles: {},
+      selected: null,
+      options: {}
+    };
+  },
+  computed: {
+    theads: {
+      get() {
+        return this.theadData.length ? this.theadData : this.thead;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    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;
+      }
+    },
+    showToolbar() {
+      if (this.readonly) {
+        return false;
+      }
+      if (typeof this.toolbar === 'boolean') {
+        if (this.toolbar) {
+          this.toolbars = [
+            {
+              type: 'search',
+              contents: [
+                {
+                  type: 'text',
+                  name: 'keyword',
+                  placeholder: '请输入关键字'
+                }
+              ]
+            }
+          ];
+        }
+        return this.toolbar;
+      } else {
+        this.toolbars = this.toolbar;
+        return true;
+      }
+    },
+    optionDatas: {
+      get() {
+        return this.optionData
+          ? { ...this.optionData, ...this.options }
+          : this.options;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  watch: {
+    checked(newVal) {
+      this.checkSelect(newVal);
+    },
+    thead: {
+      immediate: true,
+      handler(val) {
+        if (typeof val === 'string') {
+          this.getTheads();
+        }
+      }
+    },
+    theads: {
+      immediate: true,
+      handler(val) {
+        this.chekOpenTotalArea();
+        if (val && val.length) {
+          this.getOptions(val);
+        }
+      }
+    },
+    param: {
+      deep: true,
+      handler(val) {
+        this.getTableData();
+      }
+    },
+    page: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.config = util.extend({}, this.config, this.page);
+      }
+    },
+    height: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.tableHeight = val;
+        }
+      }
+    },
+    maxHeight: {
+      immediate: true,
+      handler(val) {
+        if (val && this.height === undefined) {
+          this.tableHeight = val;
+        }
+      }
+    },
+    display(val) {
+      if (val) {
+        this.resetHeight();
+      }
+    }
+  },
+  created() {
+    this.immediate && this.getTableData();
+  },
+  mounted() {
+    this.checkSelect(this.checked);
+    this.resetHeight();
+  },
+  methods: {
+    getOptions(res) {
+      res.forEach(item => {
+        if (item.sysCode || item.url) {
+          let params = util.extend(
+            {},
+            item.sysCode ? { sysAppCode: item.sysCode } : {},
+            item.param ? item.param : {}
+          );
+          util
+            .ajax({
+              url: item.sysCode ? findSysCode : item.url,
+              method: this.method,
+              params: params,
+              data: params
+            })
+            .then(res => {
+              if (res.rCode === 0) {
+                if (item.type == 'ganged') {
+                  this.$set(this.options, item.field || item.prop, [
+                    JSON.parse(JSON.stringify(res.results))
+                  ]);
+                } else {
+                  this.$set(
+                    this.options,
+                    item.field || item.prop,
+                    JSON.parse(JSON.stringify(res.results))
+                  );
+                }
+              } else {
+                let msg = res.msg || '系统错误，请联系管理员！';
+                this.$message.error(msg);
+              }
+            })
+            .catch(err => {
+              if (err.message && err.message !== 'canceled') {
+                this.$message.error(err.message);
+              }
+            });
+        } else {
+          if (item.childHead && item.childHead.length) {
+            this.getOptions(item.childHead);
+          }
+          if (item.children && item.children.length) {
+            this.getOptions(item.children);
+          }
+        }
+      });
+    },
+    checkObject(item) {
+      return util.getObjectType(item) === 'object';
+    },
+    chekOpenTotalArea() {
+      if (this.total || this.showSummary) {
+        this.showTotal = true;
+        return;
+      }
+      const arr = JSON.parse(JSON.stringify(this.thead));
+      arr.forEach(item => {
+        if (item.total) {
+          this.showTotal = true;
+        }
+      });
+    },
+    rowClick(row, column, event) {
+      this.$emit('click', row, column, event);
+      this.$emit('row-click', row, column, event);
+    },
+    handleClickAddData(scope) {
+      const data = JSON.parse(JSON.stringify(scope.row));
+      const index = scope.$index + 1;
+      this.datas.splice(index, 0, data);
+      this.$emit('dataChange', 'add', data);
+      this.$emit('btnClick', {
+        event: 'addRow',
+        row: data,
+        index: index,
+        data: data
+      });
+    },
+    handleClickDeleteData(scope) {
+      const data = JSON.parse(JSON.stringify(scope.row));
+      const index = scope.$index;
+      this.datas.splice(index, 1);
+      this.$emit('dataChange', 'delete', data);
+      this.$emit('btnClick', {
+        event: 'deleteRow',
+        row: data,
+        index: index,
+        data: data
+      });
+    },
+    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;
+      }
+    },
+    getTheads() {
+      util
+        .ajax({
+          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 = [];
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    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.tableLoadingText = '加载中...';
+      let reqData = util.extend({}, this.param, {
+        pageNum: this.config.pageNum,
+        pageSize: this.config.pageSize
+      });
+      if (where) {
+        reqData = util.extend({}, reqData, where);
+      }
+      this.tableLoading = true;
+      util
+        .ajax({
+          url: this.url,
+          method: this.method,
+          format: this.format,
+          params: reqData,
+          data: reqData
+        })
+        .then(res => {
+          this.tableLoading = false;
+          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 = [];
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+          this.tableLoading = false;
+        });
+    },
+    selectionChange(data) {
+      this.selected = JSON.parse(JSON.stringify(data));
+      this.$emit('selection-change', data);
+    },
+    clearSelection() {
+      this.$refs.oaTable.clearSelection();
+    },
+    toggleRowSelection(row, selected) {
+      this.$refs.oaTable.toggleRowSelection(row, selected);
+    },
+    toggleAllSelection() {
+      this.$refs.oaTable.toggleAllSelection();
+    },
+    toggleRowExpansion(row, expanded) {
+      this.$refs.oaTable.toggleRowExpansion(row, expanded);
+    },
+    setCurrentRow(row) {
+      this.$refs.oaTable.setCurrentRow(row);
+    },
+
+    clearSort() {
+      this.$refs.oaTable.clearSort();
+    },
+    clearFilter(columnKey) {
+      this.$refs.oaTable.clearFilter(columnKey);
+    },
+    doLayout() {
+      this.$refs.oaTable.doLayout();
+    },
+    sort(prop, order) {
+      this.$refs.oaTable.sort(prop, order);
+    },
+    formBlur(data) {
+      this.$emit('blur', data, this.datas);
+    },
+    formFocus(data) {
+      this.$emit('focus', data, this.datas);
+    },
+    formChange(data) {
+      this.$emit('edit', data, this.datas);
+      this.$emit('change', data, this.datas);
+    },
+    handleAjax(handle, row) {
+      this.changeLoading(true, `${handle.text}中...`);
+      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);
+      util
+        .ajax({
+          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.changeLoading(false);
+          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.$message.error(
+              res.msg || `${handle.text}失败，请联系管理员！`
+            );
+          }
+        })
+        .catch(err => {
+          this.changeLoading(false);
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    checkParse(data, parse) {
+      if (Array.isArray(data)) {
+        return data.map(items => {
+          let item = JSON.parse(JSON.stringify(items));
+          let obj = {};
+          for (let i in parse) {
+            obj[i] = item[parse[i]];
+            delete item[parse[i]];
+          }
+          return { ...obj, ...item };
+        });
+      }
+      let item = JSON.parse(JSON.stringify(data));
+      let obj = {};
+      for (let i in parse) {
+        obj[i] = item[parse[i]];
+        delete item[parse[i]];
+      }
+      return { ...obj, ...item };
+    },
+    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.field ? row[handle.field] : '';
+          this.$confirm(`确定要${handle.text}${msg}吗`, '提示', {
+            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,
+            selected: rows,
+            ...res
+          });
+        } else if (
+          handle.event === 'add' ||
+          handle.event === 'edit' ||
+          handle.event === 'look'
+        ) {
+          let changes = {
+            event: handle.event,
+            title: handle.title || handle.text,
+            value: handle.event === 'add' ? {} : rows,
+            readonly: handle.event === 'look',
+            actionType: handle.actionType
+              ? handle.actionType
+              : handle.event === 'add'
+              ? 'save'
+              : 'update',
+            visible: true
+          };
+          if (handle.dialog) {
+            let dialog;
+            for (let i = 0; i < this.$children.length; i++) {
+              let child = this.$children[i];
+              if (child.$refs[handle.dialog]) {
+                dialog = child.$refs[handle.dialog];
+                break;
+              }
+            }
+            dialog.setAttrs(changes);
+          }
+          this.injector && this.injector.handleChangeData(changes);
+          if (handle.busEvent) {
+            bus.$emit(handle.busEvent, 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;
+        }
+        this.injector && this.injector.handleChangeData(changeData);
+        if (handle.busEvent) {
+          bus.$emit(handle.busEvent, changes);
+        }
+      } 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].title;
+          }
+          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, rows);
+        this.$emit('btn-click', res, this.datas, thead, rows);
+      }
+    },
+    sizeChange(res) {
+      this.config.pageSize = res;
+      this.config.pageNum = 1;
+      this.$emit('page-size-change', res);
+      if (this.url) {
+        this.getTableData({ where: this.wheres, first: false });
+      }
+    },
+    currentChange(res) {
+      this.config.pageNum = res;
+      this.$emit('page-current-change', res);
+      if (this.url) {
+        this.getTableData({ where: this.wheres, first: false });
+      }
+    },
+    preClick(res) {
+      this.config.pageNum = res;
+      this.$emit('prev', res);
+    },
+    nextClick(res) {
+      this.config.pageNum = res;
+      this.$emit('next', res);
+    },
+    hanleSearch(data) {
+      this.wheres = data;
+      if (this.url) {
+        if (this.response !== undefined) {
+          this.getTableData({
+            where: this.response({
+              type: 'search',
+              data: JSON.parse(JSON.stringify(data))
+            })
+          });
+        } else {
+          this.getTableData({ where: this.wheres });
+        }
+      }
+      this.$emit('search', data);
+    },
+    hanleReset() {
+      if (this.url) {
+        this.where = {};
+        this.getTableData();
+      }
+      this.$emit('reset');
+    },
+    hanleSubmit({ data, show }) {
+      this.wheres = data;
+      if (this.url) {
+        if (this.response !== undefined) {
+          this.getTableData({
+            where: this.response({
+              type: 'filter',
+              data: JSON.parse(JSON.stringify(data))
+            })
+          });
+        } else {
+          this.getTableData({ where: this.wheres });
+        }
+      }
+      this.$emit('submit', { data, show });
+    },
+    hanleCancel() {
+      if (this.url && JSON.stringify(this.wheres) !== '{}') {
+        this.wheres = {};
+        this.getTableData();
+      }
+      this.$emit('cancel');
+    },
+    handleTabs({ item, index }) {
+      if (this.url) {
+        this.getTableData({ where: item });
+      }
+      this.$emit('tabs', { item, index });
+    },
+    reload(obj, first = false) {
+      if (obj && obj.config) {
+        this.config = util.extend({}, this.config, obj.config);
+      }
+      if (this.url) {
+        this.getTableData({ where: obj && obj.where ? obj.where : {}, first });
+      }
+    },
+    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';
+        }
+      });
+    },
+    validate(callback) {
+      let form = this.elForm || this.$refs.esTableForm;
+      form.validate(valid => {
+        callback(valid);
+      });
+    },
+    getChildrens(h, childHead, i) {
+      let doms = [];
+      childHead.forEach((item, index) => {
+        if (item.hide !== true) {
+          let childs = [];
+          if (item.childHead && item.childHead.length) {
+            childs = childs.concat(this.getChildrens(h, item.childHead, index));
+          }
+          if (item.children && item.children.length) {
+            childs = childs.concat(this.getChildrens(h, item.children, index));
+          }
+          doms.push(
+            h(
+              'column',
+              {
+                props: {
+                  name: this.name,
+                  item: item,
+                  width: item.width,
+                  index: 1000 + i * 100 + index,
+                  readonly: this.readonly,
+                  optionData: this.optionDatas,
+                  form: this.form,
+                  minWidth: this.minWidth
+                },
+                key: `${i}_${index}`,
+                on: {
+                  handleClick: this.handleClick,
+                  formBlur: this.formBlur,
+                  formFocus: this.formFocus,
+                  formChange: this.formChange
+                }
+              },
+              childs
+            )
+          );
+        }
+      });
+      return doms;
+    },
+    changeLoading(show, text) {
+      this.tableLoading = show;
+      if (text) {
+        this.tableLoadingText = text;
+      }
+    },
+    handleFilterColumn() {
+      this.$refs.sizer.show();
+    },
+    mergeThead(res) {
+      this.theadData = res;
+      this.$forceUpdate();
+    }
+  },
+  render(h) {
+    let doms = [];
+    let icon = false;
+    if (this.sizer) {
+      icon = 'es-icon-biao';
+    }
+    if (this.form && this.elForm == '') {
+      icon = false;
+    }
+    if (this.showToolbar) {
+      doms.push(
+        h('es-toolbar', {
+          props: {
+            contents: this.toolbars,
+            close: this.close,
+            callBack: this.resetHeight,
+            showFormBtn: this.showFormBtn,
+            searchValue: this.searchValue,
+            advanceValue: this.advanceValue
+          },
+          on: {
+            click: this.handleClick,
+            search: this.hanleSearch,
+            submit: this.hanleSubmit,
+            tabs: this.handleTabs,
+            reset: this.hanleReset,
+            cancel: this.hanleCancel
+          }
+        })
+      );
+    }
+    if (this.title) {
+      doms.push(
+        h('p', {
+          class: 'es-table-title',
+          domProps: {
+            innerText: this.title
+          }
+        })
+      );
+    }
+    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,
+            filterIcon: icon
+          }
+        })
+      );
+      icon = false;
+    }
+    // 开启索引
+    if (this.numbers) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            type: 'index',
+            label: '序号',
+            width: '70',
+            align: 'center',
+            fixed: 'left',
+            index:
+              this.index === true
+                ? (this.config.pageNum - 1) * this.config.pageSize + 1
+                : this.index === false
+                ? 1
+                : this.index,
+            filterIcon: icon
+          }
+        })
+      );
+      icon = false;
+    }
+    this.theads.forEach((items, indexs) => {
+      if (
+        items.type &&
+        (items.type === 'selection' || items.type === 'index')
+      ) {
+        if (items.type === 'index') {
+          dom.push(
+            h('el-table-column', {
+              props: util.extend(
+                {},
+                {
+                  type: 'index',
+                  label: '序号',
+                  width: '70',
+                  align: 'center',
+                  fixed: 'left',
+                  index:
+                    this.index === true
+                      ? (this.config.pageNum - 1) * this.config.pageSize + 1
+                      : this.index === false
+                      ? 1
+                      : this.index,
+                  filterIcon: icon
+                },
+                items
+              ),
+              key: indexs
+            })
+          );
+          icon = false;
+        } else {
+          dom.push(
+            h('el-table-column', {
+              props: util.extend(
+                {},
+                {
+                  type: 'selection',
+                  width: '55',
+                  align: 'center',
+                  fixed: 'left',
+                  filterIcon: icon
+                },
+                items
+              ),
+              key: indexs
+            })
+          );
+          icon = false;
+        }
+      } else if (items.hide !== true) {
+        let tds = [];
+        if (items.childHead && items.childHead.length) {
+          tds = tds.concat(this.getChildrens(h, items.childHead, indexs));
+        }
+        if (items.children && items.children.length) {
+          tds = tds.concat(this.getChildrens(h, items.children, indexs));
+        }
+        dom.push(
+          h(
+            'column',
+            {
+              props: {
+                name: this.name,
+                item: items,
+                width: items.width,
+                index: indexs,
+                readonly: this.readonly,
+                optionData: this.optionDatas,
+                form: this.form,
+                minWidth: this.minWidth,
+                filterIcon: icon
+              },
+              on: {
+                handleClick: this.handleClick,
+                formBlur: this.formBlur,
+                formFocus: this.formFocus,
+                formChange: this.formChange
+              },
+              key: indexs
+            },
+            tds
+          )
+        );
+        icon = false;
+      }
+    });
+    if (this.editable && !this.readonly) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            width: '80',
+            type: 'handle',
+            align: 'center',
+            label: '操作',
+            total: false
+          },
+          class: 'eoss-ui-eidt-column',
+          scopedSlots: {
+            default: props => {
+              let scopeDom = [];
+              if (!props.row.cantAdd) {
+                scopeDom.push(
+                  h(
+                    'el-button',
+                    {
+                      props: {
+                        type: 'text'
+                      },
+                      on: {
+                        click: () => {
+                          this.handleClickAddData(props);
+                        }
+                      }
+                    },
+                    [h('i', { class: 'el-icon-circle-plus-outline' })]
+                  )
+                );
+              }
+              if (!props.row.cantDelete) {
+                scopeDom.push(
+                  h(
+                    'el-button',
+                    {
+                      props: {
+                        type: 'text'
+                      },
+                      on: {
+                        click: () => {
+                          this.handleClickDeleteData(props);
+                        }
+                      }
+                    },
+                    [h('i', { class: 'el-icon-remove-outline' })]
+                  )
+                );
+              }
+              return scopeDom;
+            }
+          }
+        })
+      );
+    }
+    if (this.$slots.append) {
+      dom.push(this.$slots.append);
+    }
+    let tableContent = [];
+    tableContent.push(
+      h(
+        'el-table',
+        {
+          props: {
+            ...this.$attrs,
+            data: this.datas,
+            emptyText: this.text || this.emptyText,
+            showSummary: this.showTotal,
+            sumText: this.sumText || this.totalText,
+            totalRow: this.restotalRow || this.totalRow,
+            height: this.tableHeight !== 'auto' ? this.tableHeight : undefined,
+            //scrollbar: this.tableHeight !== 'auto',
+            border: this.border
+          },
+          on: {
+            ...this.$listeners,
+            'row-click': this.rowClick,
+            'selection-change': this.selectionChange,
+            'filter-column': this.handleFilterColumn
+          },
+          class: 'es-table' + (this.theadBorder ? ' es-thead-border' : ''),
+          ref: 'oaTable'
+        },
+        dom
+      )
+    );
+    if (this.page) {
+      tableContent.push(
+        h('es-pagination', {
+          attrs: {
+            ...this.config
+          },
+          class: 'es-table-page',
+          style: { 'text-align': this.page.position || 'center' },
+          on: {
+            change: this.sizeChange,
+            current: this.currentChange,
+            prev: this.preClick,
+            next: this.nextClick
+          }
+        })
+      );
+    }
+    doms.push(
+      h(
+        'div',
+        {
+          style: this.styles,
+          class: 'es-data-table-content',
+          ref: 'esTableContent'
+        },
+        tableContent
+      )
+    );
+    if (this.sizer) {
+      doms.push(
+        h('sizer', {
+          props: {
+            data: this.theads
+          },
+          ref: 'sizer'
+        })
+      );
+    }
+    if (this.$slots.dialog) {
+      doms.push(this.$slots.dialog);
+    }
+    let tag = 'div';
+    let ref = '';
+    if (this.form && this.elForm == '') {
+      tag = 'el-form';
+      ref = 'esTableForm';
+    }
+    return h(
+      tag,
+      {
+        props: {
+          model: this.datas,
+          labelWidth: '0'
+        },
+        ref: ref,
+        class: 'es-data-table',
+        attrs: {
+          'element-loading-text': this.tableLoadingText
+        },
+        directives: [
+          {
+            name: 'loading',
+            value: this.tableLoading
+          }
+        ]
+      },
+      doms
+    );
+  }
+};
+</script>