@leevan/jtui 1.2.7 → 2.0.1

package/packages/jt-table/examples/FilterInput.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="jt-table-filter-input">
+    <vxe-input 
+    v-for="(item,index) in column.filters"
+    :key="index"
+    type="text" 
+    style="margin-top:6px"
+    v-model="item.data" 
+    placeholder="请输入筛选值" 
+    @input="changeOptionEvent"></vxe-input>
+    <div class="jt-table-fc-footer">
+      <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
+      <vxe-button @click="resetEvent">重置</vxe-button>
+      <vxe-button @click="addInput">+</vxe-button>
+      <vxe-button @click="decInput">-</vxe-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilterInput',
+  props: {
+    params: Object
+  },
+  data () {
+    return {
+      size: 'mini',
+      column: null,
+      option: null
+    }
+  },
+  watch: {
+    params () {
+      this.load()
+    }
+  },
+  created () {
+    this.load()
+  },
+  methods: {
+    load () {
+      // filters 可以配置多个，实际只用一个就可以满足需求了
+      const { column } = this.params
+      const option = column.filters[0]
+      this.column = column
+      this.option = option
+    },
+    changeOptionEvent () {
+      const { params, option } = this
+      const { $panel } = params
+      const checked = !!option.data
+      $panel.changeOption(null, checked, option)
+    },
+    //确认
+    confirmEvent () {
+      const { $panel } = this.params
+      $panel.confirmFilter()
+    },
+    //重置
+    resetEvent () {
+      const { $panel } = this.params
+      this.column.filters.length = 1;
+      $panel.resetFilter()
+    },
+    //增加
+    addInput(){
+      this.column.filters.push({checked: true,
+        data: "",
+        label: undefined,
+        resetValue: undefined,
+        value: undefined})
+    },
+    decInput(){
+      if(this.column.filters.length > 1){
+        this.column.filters.pop();
+      } 
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jt-table-filter-input {
+  padding: 10px;
+  
+}
+.jt-table-filter-input .jt-table-fc-footer {
+  padding-top:12px;
+  text-align: center;
+}
+</style>

package/packages/jt-table/filter.js

@@ -0,0 +1,162 @@
+import Vue from 'vue';
+import VXETable from 'vxe-table';
+import XEUtils from 'xe-utils'
+
+import FilterInput from './examples/FilterInput.vue'
+import FilterContent from './examples/FilterContent.vue'
+import FilterComplex from './examples/FilterComplex.vue'
+import FilterExcel from './examples/FilterExcel.vue'
+
+Vue.component(FilterInput.name, FilterInput)
+Vue.component(FilterContent.name, FilterContent)
+Vue.component(FilterComplex.name, FilterComplex)
+Vue.component(FilterExcel.name, FilterExcel)
+
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx';
+VXETable.use(VXETablePluginExportXLSX);
+
+// 创建一个简单的输入框筛选
+VXETable.renderer.add('FilterInput', {
+    // 不显示底部按钮，使用自定义的按钮
+    isFooter: false,
+    // 筛选模板
+    renderFilter (h, renderOpts, params) {
+      return [
+        <filter-input params={ params }></filter-input>
+      ]
+    },
+    // 筛选方法
+    filterMethod ({ option, row, column }) {
+      const { data } = option
+      const cellValue = XEUtils.get(row, column.property)
+      return XEUtils.toString(cellValue).indexOf(data) > -1
+    }
+  })
+  
+  // 创建一个支持列内容的筛选
+  VXETable.renderer.add('FilterContent', {
+    // 不显示底部按钮，使用自定义的按钮
+    isFooter: false,
+    // 筛选模板
+    renderFilter (h, renderOpts, params) {
+      return [
+        <filter-content params={ params }></filter-content>
+      ]
+    },
+    // 重置数据方法
+    filterResetMethod ({ options }) {
+      options.forEach(option => {
+        option.data = { vals: [], sVal: '' }
+      })
+    },
+    // 筛选数据方法
+    filterMethod ({ option, row, column }) {
+      const { vals } = option.data
+      const cellValue = XEUtils.get(row, column.property)
+      /* eslint-disable eqeqeq */
+      return vals.some(val => val == cellValue)
+    }
+  })
+  
+  // 创建一个条件的渲染器
+  VXETable.renderer.add('FilterComplex', {
+    // 不显示底部按钮，使用自定义的按钮
+    isFooter: false,
+    // 筛选模板
+    renderFilter (h, renderOpts, params) {
+      return [
+        <filter-complex params={ params }></filter-complex>
+      ]
+    },
+    // 重置数据方法
+    filterResetMethod ({ options }) {
+      options.forEach(option => {
+        option.data = { type: 'eq' , name: '' }
+      })
+    },
+    // 筛选数据方法
+    filterMethod ({ option, row, column }) {
+      let cellValue = XEUtils.get(row, column.property)
+      const { type } = option.data
+      let { value } = option.data
+      if (cellValue) {
+        switch (type) {
+          case 'eq':
+            return cellValue == value
+          case 'gt':
+            return Number(cellValue) > Number(value) 
+          case 'lt':
+            return Number(cellValue) < Number(value)
+          case 'gteq':
+            return Number(cellValue) >= Number(value)
+          case 'lteq':
+            return Number(cellValue) <= Number(value)
+        }
+      }
+      return false
+    }
+  })
+  
+  // 创建一个实现Excel的筛选器
+  VXETable.renderer.add('FilterExcel', {
+    // 不显示底部按钮，使用自定义的按钮
+    isFooter: false,
+    // 筛选模板
+    renderFilter (h, renderOpts, params) {
+      return [
+        <filter-excel params={ params }></filter-excel>
+      ]
+    },
+    // 重置数据方法
+    filterResetMethod ({ options }) {
+      options.forEach(option => {
+        option.data = {f1Type: '1', f1Val: '', fMode: 'and', f2Type: '1', f2Val: '' }
+      })
+    },
+    // 筛选数据方法
+    filterMethod ({ option, row, column }) {
+      const cellValue = XEUtils.get(row, column.property)
+      const {f1Type, f1Val, fMode, f2Type, f2Val } = option.data
+      if (cellValue) {
+        if (f1Type || f2Type) {
+          // 通过筛选条件
+          const calculate = (type, val) => {
+            switch (type) {
+              case '1':
+                return cellValue == val
+              case '2':
+                return cellValue != val
+              case '3':
+                return Number(cellValue) > Number(val)
+              case '4':
+                return Number(cellValue) >= Number(val)
+              case '5':
+                return Number(cellValue) < Number(val)
+              case '6':
+                return Number(cellValue) <= Number(val)
+              case '7':
+                return cellValue.indexOf(val) === 0
+              case '8':
+                return cellValue.indexOf(val) !== 0
+              case '9':
+                return cellValue.lastIndexOf(val) === cellValue.length - val.length
+              case '10':
+                return cellValue.lastIndexOf(val) !== cellValue.length - val.length
+              case '11':
+                return cellValue.indexOf(val) > -1
+              case '12':
+                return cellValue.indexOf(val) === -1
+            }
+            return true
+          }
+          const f1Rest = calculate(f1Type, f1Val)
+          const f2Rest = calculate(f2Type, f2Val)
+          if (fMode === 'and') {
+            return f1Rest && f2Rest
+          }
+          return f1Rest || f2Rest
+        }
+      }
+      return false
+    }
+  })

package/packages/jt-table/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import JtTablePc from './index.vue';
+
+// 为组件提供 install 安装方法，供按需引入
+JtTablePc.install = function (Vue) { 
+  Vue.component(JtTablePc.name, JtTablePc)
+}
+
+// 导出组件
+export default JtTablePc

package/packages/jt-table/index.vue

@@ -0,0 +1,1441 @@
+<template>
+    <div class="tableStyle-2" 
+    :class="isWrap ? 'isWrap' : ''"
+    style="position:absolute;top:1px;left:1px;right:1px;bottom:1px;">
+        <!-- 普通表格 -->
+        <div style="position:relative" v-if="isTool">
+            <vxe-toolbar class="jt-toolbar" :custom="{icon:'jtIcon iconpeizhi41 colStyle'}"></vxe-toolbar>
+        </div>
+        <vxe-table
+          class="jt-table-class-only"
+          height="auto"
+          size="mini"
+          show-overflow
+          show-header-overflow
+          auto-resize
+          resizable
+          highlight-current-row
+          highlight-current-column
+          keep-source
+          v-if="tableType === 'default'"
+          :id="id"
+          :ref="id"
+          :data="data.DataArray"
+          :stripe="stripe"
+          :border="border"
+          :max-height="maxHeight"
+          :show-footer="isFooter"
+          :footer-method="footerMethod"
+          :footer-span-method="footerColspanMethod"
+          :footer-cell-class-name="footerCellClassName"
+          :loading="loading"
+          :row-style="rowStyle"
+          :cell-style="cellStyle_m"
+          :span-method="spanMethod"
+          :scroll-y="{mode: 'wheel'}"
+          :sort-config="{sortMethod:sortMethod}"
+          :radio-config="{checkRowKey: null}"
+          :keyboard-config="{isArrow: true}"
+          :checkbox-config="{highlight:true}"
+          :export-config="{type: 'xlsx',types:['xlsx', 'csv', 'html', 'xml', 'txt']}"
+          :custom-config="{storage: true,checkMethod: checkColumnMethod}"
+          :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
+          :expand-config="{visibleMethod,loadMethod:expandConfig.loadMethod,toggleMethod,lazy:true,accordion: expandConfig.accordion}"
+          @scroll="scroll"
+          @checkbox-change="selectChangeEvent"
+          @checkbox-all="selectChangeEvent"
+          @radio-change="radioSelectChangeEvent"
+          @cell-click="cellClickEvent"
+          @keydown="keyEnter"
+         >
+            <!-- 复选框列 -->
+            <vxe-table-column v-if="checkbox" 
+            type="checkbox" 
+            width="38" 
+            align="center"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 单选框列 -->
+            <vxe-table-column 
+            v-if="radio" 
+            type="radio" 
+            width="38" 
+            align="center"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 序号列 -->
+            <vxe-table-column
+            v-if="isSeq && data" 
+            type="seq"
+            align="center"
+            :width="req+'px'"
+            title="序号"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 后台数据列 -->
+            <template v-for="(item,index) in data.retjson.header">
+                <vxe-table-column 
+                :edit-render="item.edit"
+                :key="index"
+                show-overflow
+                :field="item.prop"
+                :align="item.align"
+                :title="item.label"
+                :type="item.html ? 'html': ''"
+                :min-width="item.width"
+                :sortable="item.isSort"
+                :visible="item.width!=0"
+                :fixed="item.isFixed"
+                :filters="filterData(item.filterRender)"
+                :filter-render="{name: item.filterRender}"
+                :formatter="formatEnum"
+                :cell-render="cellRenderData(item.cellRender)"
+                >
+                </vxe-table-column>
+            </template>
+            <!-- 展开行 -->
+            <vxe-table-column 
+            v-if="expandConfig.isOpen"
+            type="expand" 
+            fixed="right"
+            :width="expandConfig.width"
+            >
+                <template #default="{row}">
+                <span style="position:relative;top:2px;right:6px;color:#333">
+                    {{isExpandText(row) ? expandConfig.text : ''}}</span>
+                </template>
+                <template #content="{ row }">
+                    <slot name="expandContent" :slot-scope="row"></slot>
+                </template>
+            </vxe-table-column>
+            <!-- 操作列 -->
+            <vxe-table-column title="操作" 
+            :visible="handlerConfig.show"
+            :align="handlerConfig.align"
+            :width="handlerConfig.width" 
+            :fixed="handlerConfig.fixed"
+            show-overflow>
+                <template v-slot="{ row , rowIndex }">
+                <el-dropdown v-if="handlerConfig.btnGroup">
+                    <el-button size="mini" type="primary">
+                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item 
+                    @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                    v-for="(item,index) in data.retjson.inBottons"
+                    :key="'s' + index"
+                    >{{item.name}}</el-dropdown-item>
+                    <el-dropdown-item
+                    v-for="(item,index) in row.inBottons"
+                    :key="index"
+                    @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                    >{{item.name}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <template v-if="!handlerConfig.btnGroup">
+                    <el-button 
+                    type="text"
+                    v-for="(item,index) in data.retjson.inBottons"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                    <i class="jtIcon ht-icon"
+                    :style="{color:item.color ? item.color : '#666',
+                    fontSize:item.size ? item.size + 'px' : '16px'}" 
+                    :class="item.icon?item.icon:'iconcaidan'"></i>
+                    <span class="ht-text" style="color:#666;">{{item.name}}</span>  
+                    </el-button>
+                    <el-button
+                    type="text"
+                    v-for="(item,index) in row.inBottons"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                    <i class="jtIcon ht-icon"
+                    :style="{color:item.color ? item.color : '#666',
+                    fontSize:item.size ? item.size + 'px' : '16px'}" 
+                    :class="item.icon?item.icon:'iconcaidan'"></i>
+                    <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                </template>
+                </template>
+            </vxe-table-column>
+        </vxe-table>
+        <!-- 大数据 -->
+        <vxe-table
+          class="jt-table-class-only"
+          height="auto"
+          size="mini"
+          show-overflow
+          show-header-overflow
+          auto-resize
+          resizable
+          highlight-current-row
+          highlight-current-column
+          keep-source
+          v-if="tableType === 'bigData'"
+          :id="id"
+          :ref="id"
+          :data="data.DataArray"
+          :stripe="stripe"
+          :border="border"
+          :max-height="maxHeight"
+          :loading="loading"
+          :row-style="rowStyle"
+          :cell-style="cellStyle_m"
+          :span-method="spanMethod"
+          :scroll-x="{gt: 20}"
+          :scroll-y="{gt: 40,mode: 'wheel'}"
+          :sort-config="{sortMethod:sortMethod}"
+          :radio-config="{checkRowKey: null}"
+          :keyboard-config="{isArrow: true}"
+          :checkbox-config="{highlight:true}"
+          :export-config="{type: 'xlsx',types:['xlsx', 'csv', 'html', 'xml', 'txt']}"
+          :custom-config="{storage: true,checkMethod: checkColumnMethod}"
+          :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
+          @scroll="scroll"
+          @checkbox-change="selectChangeEvent"
+          @checkbox-all="selectChangeEvent"
+          @radio-change="radioSelectChangeEvent"
+          @cell-click="cellClickEvent"
+          @keydown="keyEnter"
+         >
+            <!-- 复选框列 -->
+            <vxe-table-column v-if="checkbox" 
+            type="checkbox" 
+            width="38" 
+            align="center"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 单选框列 -->
+            <vxe-table-column 
+            v-if="radio" 
+            type="radio" 
+            width="38" 
+            align="center"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 序号列 -->
+            <vxe-table-column
+            v-if="isSeq && data" 
+            type="seq"
+            align="center"
+            :width="req+'px'"
+            title="序号"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 后台数据列 -->
+            <template v-for="(item,index) in data.retjson.header">
+                <vxe-table-column 
+                :edit-render="item.edit"
+                :key="index"
+                show-overflow
+                :field="item.prop"
+                :align="item.align"
+                :title="item.label"
+                :type="item.html ? 'html': ''"
+                :min-width="item.width"
+                :sortable="item.isSort"
+                :visible="item.width!=0"
+                :fixed="item.isFixed"
+                :filters="filterData(item.filterRender)"
+                :filter-render="{name: item.filterRender}"
+                :formatter="formatEnum"
+                :cell-render="cellRenderData(item.cellRender)"
+                >
+                </vxe-table-column>
+            </template>
+            <!-- 展开行 -->
+            <vxe-table-column 
+            v-if="expandConfig.isOpen"
+            type="expand" 
+            fixed="right"
+            :width="expandConfig.width"
+            >
+                <template #default="{row}">
+                <span style="position:relative;top:2px;right:6px;color:#333">
+                    {{isExpandText(row) ? expandConfig.text : ''}}</span>
+                </template>
+                <template #content="{ row }">
+                    <slot name="expandContent" :slot-scope="row"></slot>
+                </template>
+            </vxe-table-column>
+            <!-- 操作列 -->
+            <vxe-table-column title="操作" 
+            :visible="handlerConfig.show"
+            :align="handlerConfig.align"
+            :width="handlerConfig.width" 
+            :fixed="handlerConfig.fixed"
+            show-overflow>
+                <template v-slot="{ row , rowIndex }">
+                <el-dropdown v-if="handlerConfig.btnGroup">
+                    <el-button size="mini" type="primary">
+                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item 
+                    @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                    v-for="(item,index) in data.retjson.inBottons"
+                    :key="'s' + index"
+                    >{{item.name}}</el-dropdown-item>
+                    <el-dropdown-item
+                    v-for="(item,index) in row.inBottons"
+                    :key="index"
+                    @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                    >{{item.name}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <template v-if="!handlerConfig.btnGroup">
+                    <el-button 
+                    type="text"
+                    v-for="(item,index) in data.retjson.inBottons"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                    <i class="jtIcon ht-icon"
+                    :style="{color:item.color ? item.color : '#666',
+                    fontSize:item.size ? item.size + 'px' : '16px'}" 
+                    :class="item.icon?item.icon:'iconcaidan'"></i>
+                    <span class="ht-text" style="color:#666;">{{item.name}}</span>  
+                    </el-button>
+                    <el-button
+                    type="text"
+                    v-for="(item,index) in row.inBottons"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                    <i class="jtIcon ht-icon"
+                    :style="{color:item.color ? item.color : '#666',
+                    fontSize:item.size ? item.size + 'px' : '16px'}" 
+                    :class="item.icon?item.icon:'iconcaidan'"></i>
+                    <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                </template>
+                </template>
+            </vxe-table-column>
+        </vxe-table>
+        <!-- 分组表格 -->
+        <vxe-table
+            size="mini"
+            class="jt-table-class-only"
+            :id="id"
+            :ref="id"
+            v-if="tableType === 'group'"
+            :custom-config="{storage: true,checkMethod: checkColumnMethod}"
+            :border="border"
+            show-overflow
+            show-header-overflow
+            height="auto"
+            :max-height="maxHeight"
+            auto-resize
+            resizable
+            highlight-current-row
+            :tree-config="groupConfig"
+            :row-class-name="rowClassName"
+            :cell-class-name="gcellClassName"
+            :keyboard-config="{isArrow: true}"
+            highlight-current-column
+            @checkbox-change="treeSelectChangeEvent"
+            :checkbox-config="{
+            highlight:true
+            }"
+            @checkbox-all="treeSelectChangeEvent"
+            @cell-click="cellClickEvent"
+            :row-style="rowStyle"
+            :cell-style="cellStyle_m"
+            :loading="loading"
+            :data="data.DataArray">
+            <vxe-table-column v-if="checkbox" 
+            type="checkbox" 
+            width="38"
+            fixed="left" 
+            align="center"></vxe-table-column>
+            <vxe-table-column
+            v-if="isSeq && data" 
+            type="seq"
+            align="center"
+            :width="req+'px'"
+            title="序号"
+            fixed="left"
+            ></vxe-table-column>
+            <template v-for="(item,index) in data.retjson.header">
+                <vxe-table-column
+                :key="index"
+                show-overflow
+                :tree-node="item.prop == treeField"
+                :field="item.prop"
+                :align="item.align"
+                :type="item.html ? 'html': ''"
+                :title="item.label"
+                :min-width="item.width"
+                :visible="item.width!=0"
+                :formatter="formatEnum"
+                >
+                </vxe-table-column>
+            </template>
+            <!-- 操作列 -->
+            <vxe-table-column title="操作" 
+            v-if="handlerConfig.show"
+            :align="handlerConfig.align"
+            :width="handlerConfig.width" 
+            :fixed="handlerConfig.fixed"
+            show-overflow>
+                <template v-slot="{ row , rowIndex }">
+                <el-dropdown v-if="handlerConfig.btnGroup">
+                    <el-button size="mini" type="primary">
+                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                    <template v-for="(item,index) in data.retjson.inBottons">
+                        <el-dropdown-item 
+                        @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="'s' + index"
+                        >{{item.name}}</el-dropdown-item>
+                    </template>  
+                    <template v-for="(item,index) in row.inBottons">
+                        <el-dropdown-item
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="index"
+                        @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                        >{{item.name}}</el-dropdown-item>
+                    </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <template v-if="!handlerConfig.btnGroup">
+                    <template v-for="(item,index) in data.retjson.inBottons">
+                    <el-button 
+                        type="text"
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="'s' + index"
+                        size="mini"
+                        @click="handlerColClick(item.funcode,row,rowIndex)"
+                        >
+                        <i class="jtIcon ht-icon"
+                        :style="{color:item.color ? item.color : '#666',
+                        fontSize:item.size ? item.size + 'px' : '16px'}" 
+                        :class="item.icon?item.icon:'iconcaidan'"></i>
+                        <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                    </template>
+                    <template v-for="(item,index) in row.inBottons">
+                    <el-button
+                    type="text"
+                    v-if="isShowAddButton(row.path,item.name)"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                        <i class="jtIcon ht-icon" 
+                        :style="{color:item.color ? item.color : '#666',
+                        fontSize:item.size ? item.size + 'px' : '16px'}"
+                        :class="item.icon?item.icon:'iconcaidan'"></i>
+                        <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                    </template>
+                </template>
+                </template>
+            </vxe-table-column>
+        </vxe-table>
+        <!-- 树形表格 and 树 -->
+        <vxe-table
+            size="mini"
+            class="jt-table-class-only"
+            :id="id"
+            :ref="id"
+            :stripe="stripe"
+            :show-header="treeTypeConfig.type == 'treeTable'"
+            v-if="tableType === 'tree'"
+            :max-height="maxHeight"
+            :border="border"
+            show-overflow
+            show-header-overflow
+            height="auto"
+            auto-resize
+            :cell-style="cellStyle_m"
+            :row-style="rowStyle"
+            :span-method="spanMethod"
+            resizable
+            highlight-current-row
+            :tree-config="treeConfig"
+            :row-key="true"
+            row-id="pkid"
+            :radio-config="{labelField:treeTypeConfig.type !== 'treeTable' ? 'name' : '',
+            checkMethod:treeRadioMethod}"
+            :checkbox-config="{labelField:treeTypeConfig.type !== 'treeTable' ? 'name' : '',
+            checkRowKeys: this.treeTypeConfig.checkRowKeys,
+            highlight:true,
+            checkMethod:checCheckboxkMethod2}"
+            @checkbox-change="treeCheckChange"
+            @checkbox-all="treeCheckChange"
+            @radio-change="radioSelectChangeEvent"
+            @cell-click="cellClickEvent"
+            :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
+            keep-source
+            :loading="loading"
+            @keydown="keyEnter"
+            @scroll="scroll1"
+            :expand-config="{visibleMethod,loadMethod:expandConfig.loadMethod,
+            toggleMethod,
+            lazy:true,accordion: expandConfig.accordion}"
+            :data="data.DataArray">
+            <!-- 复选框列 -->
+            <vxe-table-column v-if="treeTypeConfig.type === 'treeTable' && treeTypeConfig.checkbox" 
+            type="checkbox" 
+            width="38" 
+            align="center"
+            fixed="left"
+            >
+            </vxe-table-column>
+            <!-- 单选框列 -->
+            <vxe-table-column 
+            v-if="treeTypeConfig.type === 'treeTable' &&  treeTypeConfig.radio" 
+            type="radio" 
+            width="38" 
+            align="center"
+            fixed="left"
+            ></vxe-table-column>
+            <!-- 序号列 -->
+            <vxe-table-column
+            v-if="isSeq && treeTypeConfig.type === 'treeTable'"
+            type="seq"
+            align="center"
+            :width="req+'px'"
+            title="序号"
+            fixed="left"
+            ></vxe-table-column>
+            <template v-for="(item,index) in data.retjson.header">
+                <vxe-table-column
+                v-if="treeTypeConfig.type !== 'treeTable'"
+                :edit-render="item.edit"
+                :type="treeTypeConfig.colType"
+                :tree-node="index == 0"
+                :key="index"
+                show-overflow
+                :field="item.prop"
+                align="left"
+                :title="item.label"
+                :min-width="item.width"
+                :cell-render="cellRenderData(item.cellRender)"
+                :visible="index === 0"
+                >
+                <template v-slot="{ row }">
+                    <span @click="treeTxtClick(row)" style="position:relative;top:2px;">
+                    <template v-if="row.path && row.path !== undefined">
+                        <i class="jtIcon" :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"></i>
+                    </template>
+                    <template v-else>
+                        <i class="jtIcon jt-iconFile" :class="row.icon ? row.icon : 'icon21file'"></i>
+                    </template>
+                    <span>{{ row.name }}</span>
+                    </span>
+                </template>
+                </vxe-table-column>
+                <vxe-table-column
+                v-if="treeTypeConfig.type === 'treeTable'"
+                :edit-render="item.edit"            
+                :tree-node="index == 0"
+                :key="index"
+                show-overflow
+                :field="item.prop"
+                :align="item.align"
+                :title="item.label"
+                :min-width="item.width"
+                :visible="item.width !== 0"
+                :type="item.html ? 'html': ''"
+                :cell-render="cellRenderData(item.cellRender)"
+                :formatter="formatEnum"
+                >
+                <template v-slot="{ row }" v-if="index === 0">
+                    <span @click="treeTxtClick(row)" style="position:relative;top:2px;">
+                    <template v-if="row.path && row.path !== undefined">
+                        <i class="jtIcon" :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"></i>
+                    </template>
+                    <template v-else>
+                        <i class="jtIcon jt-iconFile" :class="row.icon ? row.icon : 'icon21file'"></i>
+                    </template>
+                    <span>{{ row[item.prop] }}</span>
+                    </span>
+                </template>
+                </vxe-table-column>
+            </template>
+            <!-- 展开行 -->
+            <vxe-table-column 
+            v-if="expandConfig.isOpen"
+            type="expand" 
+            :width="expandConfig.width"
+            >
+                <template #default="{row}">
+                <span style="position:relative;top:2px;right:6px;color:#333">
+                    {{isExpandText(row) ? expandConfig.text : ''}}</span>
+                </template>
+                <template #content="{ row }">
+                    <slot name="expandContent" :slot-scope="row"></slot>
+                </template>
+            </vxe-table-column>
+            <!-- 操作列 -->
+            <vxe-table-column title="操作" 
+            v-if="handlerConfig.show"
+            :align="handlerConfig.align"
+            :width="handlerConfig.width" 
+            :fixed="handlerConfig.fixed"
+            show-overflow>
+                <template v-slot="{ row , rowIndex }">
+                <el-dropdown v-if="handlerConfig.btnGroup">
+                    <el-button size="mini" type="primary">
+                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                    <template v-for="(item,index) in data.retjson.inBottons">
+                        <el-dropdown-item 
+                        @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="'s' + index"
+                        >{{item.name}}</el-dropdown-item>
+                    </template>  
+                    <template v-for="(item,index) in row.inBottons">
+                        <el-dropdown-item
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="index"
+                        @click.native="handlerColClick(item.funcode,row,rowIndex)"
+                        >{{item.name}}</el-dropdown-item>
+                    </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <template v-if="!handlerConfig.btnGroup">
+                    <template v-for="(item,index) in data.retjson.inBottons">
+                    <el-button 
+                        type="text"
+                        v-if="isShowAddButton(row.path,item.name)"
+                        :key="'s' + index"
+                        size="mini"
+                        @click="handlerColClick(item.funcode,row,rowIndex)"
+                        >
+                        <i class="jtIcon ht-icon"
+                        :style="{color:item.color ? item.color : '#666',
+                        fontSize:item.size ? item.size + 'px' : '16px'}" 
+                        :class="item.icon?item.icon:'iconcaidan'"></i>
+                        <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                    </template>
+                    <template v-for="(item,index) in row.inBottons">
+                    <el-button
+                    type="text"
+                    v-if="isShowAddButton(row.path,item.name)"
+                    :key="index"
+                    size="mini"
+                    @click="handlerColClick(item.funcode,row,rowIndex)"
+                    >
+                        <i class="jtIcon ht-icon" 
+                        :style="{color:item.color ? item.color : '#666',
+                        fontSize:item.size ? item.size + 'px' : '16px'}"
+                        :class="item.icon?item.icon:'iconcaidan'"></i>
+                        <span class="ht-text" style="color:#666;">{{item.name}}</span>
+                    </el-button>
+                    </template>
+                </template>
+                </template>
+            </vxe-table-column>
+        </vxe-table>
+    </div>
+</template>
+
+<script>
+    import XEUtils from 'xe-utils';
+    export default {
+        name: 'jt-table-pc',
+        created(){
+            if(this.isPage){
+                this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
+                this.dataTotal = this.tableData.length;
+                this.pageTotal = Math.ceil(this.dataTotal / 50);
+                for(let i = 1; i <= this.pageTotal; i++){
+                    this.dataTreeObj[i] = this.tDataCopy.slice((i-1) * 50, i * 50);
+                }
+                this.data.DataArray = [...this.dataTreeObj[this.pageIndex],...this.dataTreeObj[this.pageIndex+1]] ;
+            }
+            if('header' in this.data.retjson){
+                this.treeField = this.data.retjson.header[0].prop;
+            } 
+        },
+        props:{
+            //表格ID
+            id:{
+            type:String,
+            required:true
+            },
+            //表格数据源
+            data:{
+            type:Object,
+            required:true
+            },
+            //序号width
+            req:{
+            type:[Number,String],
+            default:60
+            },
+            //表格类型，默认default为普通表格、tree为树表
+            tableType:{
+            type:String,
+            default:'default'
+            },
+            //是否显示单选框
+            radio:{
+            type:Boolean,
+            default:false
+            },
+            //是否显示复选框
+            checkbox:{
+            type:Boolean,
+            default:false
+            },
+            //操作列配置
+            handlerConfig:{
+            type:Object,
+            default:() => {
+                return {
+                show:false,
+                width:250,
+                align:'center',
+                fixed:'right',
+                btnGroup:true
+                }
+            }
+            },
+            //是否显示表尾
+            isFooter:{
+            type:Boolean,
+            default:false
+            },
+            //表尾显示项控制
+            footConfig:{
+            type:Object,
+            default:() => {
+                return {
+                filed:[]
+                }
+            }
+            },
+            //树 or 树表控制项
+            treeTypeConfig:{
+            type:Object,
+            default:() => {
+                return {
+                    colType:'checkbox',
+                    type:'tree',
+                    checkbox:true,
+                    line:true,
+                    expandAll:false,
+                    checkRowKeys:[]
+                }
+            }
+            },
+            treeLazy:{
+            type:Boolean,
+            default:true
+            },
+            //加载动画
+            loading:{
+            type:Boolean,
+            default:false
+            },
+            //显示、隐藏列开关
+            isTool:{
+            type:Boolean,
+            default:false
+            },
+            //行样式控制函数
+            rowStyle:{
+            type:Function
+            },
+            //单元格样式控制函数
+            cellStyle:{
+            type:Function
+            },
+            //分组表格是否开启连线模式
+            groupLine:{
+            type:Boolean,
+            default:false
+            },
+            //合并行和列函数
+            spanMethod:{
+            type:Function
+            },
+            //斑马线开关
+            stripe:{
+            type:Boolean,
+            default:false
+            },
+            //表格最大高度
+            maxHeight:{
+            type:[String,Number],
+            default:0
+            },
+            //分组表格是否默认展开所有
+            groupExpandAll:{
+            type:Boolean,
+            default:false
+            },
+            //表格边线
+            border:{
+            type:String,
+            default:'full'
+            },
+            //树、树表是否禁用非最后一级
+            isParent:{
+            type:Boolean,
+            default:true
+            },
+            //是否开启序号
+            isSeq:{
+            type:Boolean,
+            default:true
+            },
+            //分组表格默认展开所有
+            isExpand:{
+            type:Boolean,
+            default:true
+            },
+            //前端滚动分页加载
+            isPage:{
+            type:Boolean,
+            default:false
+            },
+            //表头是否换行
+            isWrap:{
+            type:Boolean,
+            default:false
+            },
+            //单元格自定义组件events
+            cellRenderMethods:{
+            type:Object,
+            default:()=>({
+                parentRow:Object,
+                radioChange:()=>{}
+            })
+            },
+            //展开行配置
+            expandConfig:{
+            type:Object,
+            default:()=>({
+                isOpen:false,
+                width:120,
+                text:'',
+                accordion:true, //手风琴模式
+                loadMethod:()=>{}
+            })
+            },
+            //树手风琴开关
+            treeAccordion:{
+            type:Boolean,
+            default:false
+            }
+        },
+        data(){
+            return {
+                tableData:this.data.DataArray, //表格数据
+                colNum:0,//当前列的数量
+                leftCol:0,//从左起计算合并列的基数
+                //分组表格的配置
+                groupConfig:{
+                    children: 'children',
+                    iconOpen: 'jtIcon iconwenjianjia1 jt-iconOpen1',
+                    iconClose: 'jtIcon iconwenjianjia jt-iconClose1',
+                    expandAll: this.groupExpandAll,
+                    line:this.groupLine
+                },
+                //树 or 树表 配置
+                treeConfig:{
+                    lazy: this.treeLazy, 
+                    children: 'children', 
+                    expandAll: this.treeTypeConfig.expandAll,
+                    hasChild: 'path', 
+                    iconOpen: 'jtIcon iconjianshao jt-iconOpen',
+                    iconClose: 'jtIcon iconjia1 jt-iconClose',
+                    loadMethod: this.loadChildrenMethod,
+                    line:this.treeTypeConfig.line,
+                    accordion:this.treeAccordion
+                },
+                treeField:'', //分组列的字段
+                timeOut:null,//滚动翻页定时器Id
+                pageIndex:1,
+                sp:0,//当前滚动的位置
+                tPageIndex:1, //树表分页当前页数
+                tDataCopy:[], //树表分页数据拷贝
+                pageTotal:0,
+                dataTotal:0,
+                dataTreeObj:{}
+            }
+        },
+        methods:{
+            //加载数据
+            loadData(data){
+               return this.$refs[this.id].loadData(data);
+            },
+            //根据类型返回筛选框源数据
+            filterData(type){
+                switch(type){
+                    case 'FilterInput' : return [{ data: ''}];
+                    case 'FilterContent' : return [{data: {vals: [], sVal: ''}}];
+                    case 'FilterExcel' : return [{data: {f1Type:'1', f1Val: '', fMode: 'and', f2Type: '1', f2Val: ''}}];
+                    case 'FilterComplex' : return [{data: {type: 'eq', value: ''}},{data: {type: 'eq', value: ''}}];
+                }
+            },
+            //单元格自定义渲染根据类型返回配置
+            cellRenderData(type){
+                switch(type){
+                    case 'TabsBtn' : return {
+                        name:'TabsBtn',
+                        events:{radioChange:this.cellRenderMethods.radioChange},
+                        parentRow:this.cellRenderMethods?.parentRow
+                    }
+                }
+            }, 
+            //枚举转换
+            formatEnum({column,cellValue}){
+            try {
+                let data = this.data.retjson.header.find(item => item.prop == column.property);
+                if(data && "html" in data && 'htmlType' in data){
+                if(data.htmlType == 'icon'){
+                    if(Array.isArray(cellValue)){
+                    let str = '';
+                    cellValue.forEach(i => {
+                        let item = data.html.find(im => {
+                        return im.value == i});
+                        if(item){
+                        str += `<span 
+                        class="jtIcon ${item.icon}" style="
+                        color:${item.color};
+                        font-size:${item.size}px;
+                        margin-right:${item.margin || '8'}px"
+                        onclick="iconItem(${i})"
+                        ></span>`
+                        }
+                    })
+                    return str ? str : cellValue
+                    }else{
+                    let item = data.html.find(item => item.value == cellValue);
+                    return item ? `<span class="jtIcon ${item.icon}" style="color:${item.color};font-size:${item.size}px"></span>` : cellValue
+                    }
+                    
+                }else if(data.htmlType == 'a'){
+                    let item = data.html.find(item => item.value == cellValue);
+                    return item ?`<a href="javascript:">${cellValue}</a>` : cellValue
+                }
+                }else if(data && "enum" in data){
+                let item = data.enum.find(item => item.value == cellValue)
+                return item ? item.label : cellValue 
+                }else{
+                return cellValue;
+                }
+            } catch (error) {
+                console.log(error)
+                return cellValue;
+            }
+            },
+            //全局排序自定义排序方法
+            sortMethod({ data, column, property, order }){
+                let data1 = data.filter(item => {
+                    return property in item;
+                })
+                let data2 = data.filter(item => {
+                    return !(property in item);
+                })
+                let list = [];
+                if (order === 'asc' || order === 'desc') {
+                    list = data1.sort((a,b)=>{
+                    return a[property]-b[property];
+                    });
+                }
+                if (order === 'desc') {
+                    list.reverse()
+                }
+                return list.concat(data2);
+            },
+            //筛选列默认禁用处理
+            checkColumnMethod({column}){
+                if(column.width == 0 || column.title == '序号'){
+                    return false
+                }
+                return true
+            },
+            //表尾统计，（计算平均值和求和）
+            footerMethod({ columns, data }){
+                const means = []
+                const sums = []
+                columns.forEach((column, columnIndex) => {
+                    if (columnIndex === 0) {
+                    means.push('平均')
+                    sums.push('求和')
+                    } else {
+                    let meanCell = null
+                    let sumCell = null
+                    this.footConfig.filed.forEach(i => {
+                        switch (column.property) {
+                        case i:
+                            meanCell = parseInt(XEUtils.mean(data, column.property))
+                            sumCell = XEUtils.sum(data, column.property)
+                            break
+                        }
+                    })
+                    
+                    means.push(meanCell)
+                    sums.push(sumCell)
+                    }
+                })
+                return [ means, sums ]
+            },
+            //表尾单元格合并
+            footerColspanMethod({ rowIndex, columnIndex }){
+                if(columnIndex === 0 && this.checkbox){
+                    return {
+                        rowspan: 1,
+                        colspan: 2
+                    }
+                }
+                if(columnIndex === 1 && this.checkbox){
+                    return {
+                        rowspan: 1,
+                        colspan: 0
+                    }
+                }
+            },
+            //表尾单元格样式控制
+            footerCellClassName ({ $rowIndex, column, columnIndex }) {
+                if (columnIndex === 0) {
+                    if ($rowIndex === 0) {
+                    return 'jt-table-col-green'
+                    } else {
+                    return 'jt-table-col-red'
+                    }
+                }
+            },
+            //树编辑禁用回调
+            activeCellMethod({column}){
+                let data = this.data.retjson.header.find(item => item.prop === column.property)
+                if(data.edit.name){
+                    return true;
+                }
+                return false;
+            },
+            //展开行权限控制
+            visibleMethod({column,row}){
+                if(row.isExpand === '1'){
+                    return true
+                }else{
+                    return false
+                }
+            },
+            //展开行展开收起
+            toggleMethod({ expanded,row }){
+                if(expanded){
+                    return true
+                }else{
+                    this.$refs[this.id].clearRowExpandLoaded(row);
+                    return false
+                }
+            },
+            //扩展单元格样式
+            cellStyle_m(param){
+                let cssObj = {}
+                if(param.row._rowcss == 'css0'){
+                    cssObj = {color:'#000'}
+                }else if(param.row._rowcss == 'css1'){
+                    cssObj = {color:'#1E90FF'}
+                }else if(param.row._rowcss == 'css2'){
+                    cssObj = {color:'#FF8C00'}
+                }else if(param.row._rowcss == 'css3'){
+                    cssObj = {color:'	#FF0000'}
+                }
+                if(this.cellStyle){
+                return Object.assign(cssObj,this.cellStyle(param));
+                }else{
+                    return cssObj;
+                }
+            },
+            //滚动到底事件派发
+            scroll(param){
+                let {scrollTop,$event} = param;
+                clearTimeout(this.timeOut);
+                this.timeOut = setTimeout(()=>{
+                    let ch = $event.target.clientHeight;
+                    let sh = $event.target.scrollHeight;
+                    if(scrollTop + ch >= sh){
+                    this.$emit('scrollBottom',++this.pageIndex);
+                    }
+                },200)
+            },
+            //checkbox改变事件派发
+            selectChangeEvent({records}){
+                this.$emit('checkbox',records);
+            },
+            //单选改变事件派发
+            radioSelectChangeEvent({row}){
+                this.$emit('radio',row);
+            },
+            //单元格点击事件派发，返回当前行的数据
+            cellClickEvent({row , column}){
+                let treePath = [];
+                if(this.tableType === 'tree'){
+                    const result = XEUtils.findTree(this.data.DataArray,
+                    item=>{
+                    return item.pkid === row.pkid
+                    },
+                    {children: 'children'});
+                    if(result){
+                    treePath = result.nodes.map(item => item.name);
+                    }
+                    this.$emit('cellClick',row,treePath,column);
+                }else{
+                    this.$emit('cellClick',row,column);
+                }
+            },
+            //回车事件派发
+            keyEnter({$event}){
+                if($event.keyCode === 13){
+                    this.$emit('enter',this.getEditData());
+                };
+            },
+            //获取编辑过的数据
+            getEditData(){
+                const {updateRecords} = this.$refs[this.id].getRecordset();
+                return updateRecords;
+            },
+            //展开行说明文字显示控制
+            isExpandText(row){
+                if(row.isExpand === '1'){
+                    return true
+                }else{
+                    return false
+                }
+            },
+            //导出数据
+            exportTableData(){
+                this.$refs[this.id].openExport({ isPrint: false });
+            },
+            //导入数据
+            importTableData(){
+                this.$refs[this.id].importData()
+            },
+            //操作列点击事件派发
+            handlerColClick(value,row,rowIndex){
+                this.$emit('handlerClick',value,row,rowIndex);
+            },
+            //普通表格转树表（仅支持一层）
+            default2tree(data,field){
+                const result = []
+                this.treeField = this.data.retjson.header[0].prop;
+                XEUtils.each(XEUtils.groupBy(data, field), (childs, key) => {
+                    result.push({
+                    [this.treeField]: key + `（ ${childs.length} ）`,
+                    children: childs
+                    })
+                })
+                this.data.DataArray = result;
+                if(this.isExpand){
+                    this.$nextTick(()=>{
+                    this.setAllTreeExpand();
+                    });
+                }
+            },
+            //树展开所有节点
+            setAllTreeExpand(){
+                this.$refs[this.id].setAllTreeExpand(true);
+            },
+            //树、树表判断不是文件夹的不能有新增按钮
+            isShowAddButton(p1,p2){
+                if(p1){
+                    return true
+                }else{
+                    if(p2 === '新增'){
+                    return false
+                    }else{
+                    return true
+                    }
+                }
+            },
+            rowClassName({ row, rowIndex }){
+                if('children' in row){
+                    return 'f-col'
+                }
+            },
+            gcellClassName({row, column}){
+                if('children' in row && column.title == '操作'){
+                    return 'h-col'
+                }
+            },
+            //树表checkbox改变事件派发，过滤有子集的数据
+            treeSelectChangeEvent({records,indeterminates}){
+                const temp = records.filter(item => !item.children)
+                this.$emit('treeCheckbox',temp);
+                this.$emit('treeCheckboxAll',[...records,...indeterminates]);
+            },
+            //树 非最后一级禁用
+            treeRadioMethod({row}){
+                if(this.isParent){
+                    return true;
+                }else{
+                    return !row.path
+                }      
+            },
+            checCheckboxkMethod2({ row }){
+                if(this.isParent){
+                    return true
+                }else{
+                    return row.children.length === 0
+                }
+            },
+            //树 checkbox改变事件派发，过滤有子集的数据
+            treeCheckChange({records,indeterminates}){
+                const temp = records.filter(item => !item.path);
+                this.$emit('treeCheckbox',temp);
+                this.$emit('treeCheckboxAll',[...records,...indeterminates]);
+            },
+            //树表滚动分页+性能优化
+            scroll1(param){
+                let {scrollTop,$event} = param;
+                clearTimeout(this.timeOut);
+                this.timeOut = setTimeout(()=>{
+                    let ch = $event.target.clientHeight;
+                    let sh = $event.target.scrollHeight;
+                    let temp = scrollTop  - this.sp;
+                    this.sp = scrollTop;
+                    if(temp < 0 && scrollTop <= 0){
+                    if(this.tPageIndex > 1){
+                        this.tPageIndex--;
+                        this.dataSliceUp(this.tPageIndex);
+                        this.$refs[this.id].scrollTo(null,(sh-ch) / 2);
+                    }
+                    }else if(temp >= 0 && scrollTop + ch >= sh){
+                    if(this.tPageIndex < this.pageTotal){
+                        this.tPageIndex++;
+                        this.dataSliceDown(this.tPageIndex);
+                        this.$refs[this.id].scrollTo(null,(sh-ch) / 2);
+                    }
+                    }
+                },200)
+            },
+            dataSliceUp(idx){
+                this.data.DataArray = this.dataTreeObj[idx-1].concat(this.dataTreeObj[idx]);
+            },
+            dataSliceDown(idx){
+                this.data.DataArray = this.dataTreeObj[idx].concat(this.dataTreeObj[idx+1]);
+            },
+            //树 懒加载方法
+            async loadChildrenMethod({ row }){
+                const { data } = await this.$axios.post(this.treeTypeConfig.path + row.path);
+                return new Promise((resolve) => {
+                    if(data[0].Result>0){
+                    resolve(data[0].DataArray)
+                    }else{
+                    const tempObj = {};
+                    data[0].retjson.header.forEach((item,index)=>{
+                        if(index === 0){
+                        tempObj[item.prop] = '无数据'
+                        }else{
+                        tempObj[item.prop] = ''
+                        }
+                    })
+                    resolve([tempObj]);
+                    }
+                })
+            },
+            //表格组件实例
+            jtTable(){
+                return this.$refs[this.id];
+            },
+            //树更新字节点，懒加载
+            reloadTreeChilds(row){
+                this.$refs[this.id].reloadTreeChilds(row);
+            },
+            //重载行数据
+            reloadRow(row){
+                this.$refs[this.id].reloadRow(row);
+            },
+            //树点击图标和文字事件
+            treeTxtClick(row){
+                let treePath = [];
+                const result = XEUtils.findTree(this.data.DataArray,
+                item=>{
+                    return item.pkid === row.pkid
+                },
+                {children: 'children'});
+                if(result){
+                    treePath = result.nodes.map(item => item.name);
+                }
+                this.$emit('treeTxtClick',row,treePath);
+            },
+            //初始化隐藏列
+            hideColumn(arr){
+                this.$nextTick(()=>{
+                    arr.forEach(item=>{
+                        let col = this.$refs[this.id].getColumnByField(item);
+                        this.$refs[this.id].hideColumn(col);
+                    })
+                })
+            },
+            //树判断行是否展开
+            isTreeExpandByRow(row){
+                return this.$refs[this.id].isTreeExpandByRow(row);
+            },
+            //树清空所有节点
+            clearTreeExpand(){
+                this.$refs[this.id].clearTreeExpand();
+            },
+            //设置表格选中
+            setCheckboxRow(ary,status=true){
+                this.$refs[this.id].setCheckboxRow(ary,status);
+            },
+            //清空所有选中
+            clearCheckboxRow(){
+                this.$refs[this.id].clearCheckboxRow();
+            },
+            //切换选中状态
+            toggleCheckboxRow(row){
+                this.$refs[this.id].toggleCheckboxRow(row);
+            },
+            //树删除数据方法
+            treeDelete(id){
+                let matchObj = XEUtils.findTree(this.data.DataArray, item => {
+                return item.pkid === id}, {
+                    children: 'children'
+                })
+                if (matchObj) {
+                    let { items, index } = matchObj
+                    items.splice(index, 1);
+                }
+                this.$refs[this.id].syncData();
+            },
+            //获取树的信息
+            getTreeData(id){
+                let matchObj = XEUtils.findTree(this.data.DataArray, item => {
+                return item.pkid == id}, {
+                    children: 'children'
+                })
+                if(matchObj){
+                    return {key:'ok',data:matchObj.item};
+                }else{
+                    return {key:'notFind'};
+                }
+            },
+            //树添加数据方法
+            treeAdd(id,obj){
+                let xTree = this.$refs[this.id];
+                xTree.createRow(obj).then(newRow => {
+                    let matchObj = XEUtils.findTree(this.data.DataArray, item => {
+                    return item.pkid === id}, {
+                        children: 'children'
+                    })
+                    if (matchObj) {
+                    matchObj.item.children.splice(matchObj.index, 0, newRow);
+                    xTree.syncData()
+                    }
+                })
+            },
+            syncData(){
+                this.$refs[this.id].syncData();
+            },
+        }
+    }
+</script>
+
+<style>
+.vxe-table{
+    font-size: 12px;
+}
+.jt-iconOpen{
+  position: relative;
+  bottom:4px;
+  right:2px;
+}
+.jt-iconClose{
+  position: relative;
+  bottom:4px;
+  right:2px;
+}
+.jt-iconOpen1{
+  color:rgb(238, 197, 85) !important;
+  position: relative;
+  bottom:7px;
+  right:5px;
+}
+.jt-iconClose1{
+  color:rgb(238, 197, 85) !important;
+  position: relative;
+  bottom:7px;
+  right:5px;
+}
+.jt-iconOpen2{
+  color:rgb(238, 197, 85) !important;
+  margin:0 3px;
+  display: inline-block;
+}
+.jt-iconClose2{
+  color:rgb(238, 197, 85) !important;
+  margin:0 3px;
+  display: inline-block;
+}
+.jt-iconFile{
+  color:rgb(195, 189, 201) !important;
+  position: relative;
+  font-size: 18px;
+  top:1px;
+  margin-left:5px;
+  margin-right:2px;
+  display: inline-block;
+}
+.jt-table-col-green{
+  background-color: rgb(125, 240, 177);
+}
+.jt-table-col-red{
+  background-color: rgb(240, 125, 125);
+}
+.ht-icon{
+  position:relative;
+  right:2px;
+  top:1px;
+}
+.jt-table-class-only .el-button:hover span,
+.jt-table-class-only .el-button:hover i{
+  color:rgb(55, 66, 214) !important;
+}
+.jt-table-class-only .vxe-cell--tree-node{
+  cursor: pointer;
+}
+.jt-toolbar{
+  position:absolute !important;
+  top:-12px;
+  right:-6px;
+  z-index:9;
+  background:transparent !important;
+}
+.jt-toolbar .vxe-custom--wrapper .vxe-button.is--circle,
+.jt-toolbar .is--active .vxe-button.is--circle{
+  border-radius: 0 !important;
+  border:none !important;
+  background:transparent !important;
+}
+.jt-toolbar .vxe-button.type--button:not(.is--disabled):focus{
+  box-shadow: none;
+  border-color:#dcdfe6;
+  background: transparent;
+}
+.jt-toolbar .colStyle{
+  font-size: 24px;
+  position: relative;
+  top:0px;
+  color:rgb(64, 111, 212);
+  opacity: .4;
+}
+.jt-toolbar .colStyle:hover{
+  color:rgb(125, 143, 224)
+}
+.isWrap .vxe-header--row .vxe-cell{
+  flex-wrap: wrap;
+}
+</style>