hs-input-select优化

src/packages/hs-input-select/src/child.vue

@@ -130,7 +130,7 @@ export default {
       await this.remoteMethodsDebounce(query, this.configData)
     },
     dealWithDefaultData() {
-      const { sourceData } = _.cloneDeep(this.allSourceData)
+      const sourceData = _.cloneDeep(this.data || [])
       const sourceData_ = _.cloneDeep(sourceData)
       return Array.isArray(sourceData_)
         ? this.tansLate(sourceData_)

src/packages/hs-lookup/src/child.vue

@@ -62,7 +62,7 @@
 
       </hs-table>
       <div
-        v-if='this.lookupConfig.multiple'
+        v-if='this.configData.multiple'
         slot="footer"
         class="dialog-footer"
       >
@@ -88,7 +88,7 @@ export default {
   name: 'lookup-component',
   computed: {
     getDisabled: function() {
-      const { disabled, disabledLevel } = this.lookupConfig
+      const { disabled, disabledLevel } = this.configData
       const type = typeof disabled
       if (disabledLevel === 1) {
         // 以自己的的配置为优先级最高
@@ -105,13 +105,10 @@ export default {
         }
       }
     },
-    lookupConfig: function() {
-      return this.allSourceData.config || {}
-    },
     hsTableData() {
       console.log('测试hsTableData')
       const data = this.tableData
-      const { value } = this.lookupConfig
+      const { value } = this.configData
       const list = this.value ? this.value.split(',') : []
       list.forEach(x => { // 设置默认勾选
         const target = data.find(item => item[value] === x)
@@ -150,7 +147,7 @@ export default {
         this.hsTableEl.position,
         'hsTableSimple'
       )
-      const { multiple } = this.lookupConfig
+      const { multiple } = this.configData
       config.selection = !!multiple
       return config
     },
@@ -161,7 +158,7 @@ export default {
       }
     },
     configData: function() {
-      return this.allSourceData.config || {}
+      return this.config || {}
     }
   },
   watch: {
@@ -225,7 +222,7 @@ export default {
     },
     async showDialog() {
       // 弹出之前做逻辑判断
-      const { value, multiple } = this.lookupConfig
+      const { value, multiple } = this.configData
       if (this.value && multiple) {
         // 多选
         const ids = this.value.split(',')
@@ -260,7 +257,7 @@ export default {
     init_value() {
       if (!this.hsTableConfig) return
       const sourceData = this.hsTableData
-      const { multiple, value, displayfield } = this.lookupConfig
+      const { multiple, value, displayfield } = this.configData
       const displayfield_value = this.formData[displayfield]
       if (displayfield_value) {
         const list = displayfield_value.split(',')
@@ -296,13 +293,12 @@ export default {
       }
     },
     async queryByIds() {
-      this.allSourceData.sourceData = []
-      const { value } = this.lookupConfig
+      const { value } = this.configData
       // 调用外面的查询方法
       const obj = {}
       obj[value] = this.value
       const data = await this.$listeners.queryLookup(
-        this.allSourceData.config,
+        this.configData,
         obj,
         this.formData
       )
@@ -317,10 +313,9 @@ export default {
      * 查询table数据
      */
     async queryTable() {
-      this.allSourceData.sourceData = []
       this.setDefaultQueryParms()
       // 如果有分页信息则要分页
-      const { per_page } = this.lookupConfig
+      const { per_page } = this.configData
       if (per_page && this.firstQuery) {
         this.firstQuery = false
         this.searchForm.per_page = per_page
@@ -328,7 +323,7 @@ export default {
       }
       // 调用外面的查询方法
       const data = await this.$listeners.queryLookup(
-        this.allSourceData.config,
+        this.configData,
         this.searchForm,
         this.formData
       )
@@ -337,7 +332,7 @@ export default {
         this.paging = paging
       }
       // 做一个合并数据
-      const { multiple } = this.lookupConfig
+      const { multiple } = this.configData
       let returnData = []
       if (Array.isArray(data)) {
         returnData = data
@@ -354,7 +349,7 @@ export default {
       }
     },
     unShiftData(queryData) {
-      const { value } = this.lookupConfig
+      const { value } = this.configData
       const selectIds = this.selectedData.map(item => item[value])
       const data_ = _.remove(queryData, function(item) {
         const item_value = item[value]
@@ -379,7 +374,7 @@ export default {
      */
     submit() {
       const selectData = this.hsTableData.filter(x => x.isSelected)
-      const prop = this.allSourceData.config.value
+      const prop = this.configData.value
       const list_ids = selectData.map(x => {
         return x[prop]
       })
@@ -398,7 +393,7 @@ export default {
      * 双击行时设置当前行为选中项
      */
     tableRowDblclick(row) {
-      const prop = this.allSourceData.config.value
+      const prop = this.configData.value
       this.$emit('input', row[prop])
       this.changeAction(row[prop])
       this.setWritebackfield([row])
@@ -407,7 +402,7 @@ export default {
     },
     setLabelValue(data) {
       const selectData = data
-      const label = this.allSourceData.config.displayfield
+      const label = this.configData.displayfield
       const label_list = selectData.map(x => x[label])
       this.label_value = label_list.join(',')
       this.label_value_old = this.label_value
@@ -418,7 +413,7 @@ export default {
     setWritebackfield(data) {
       this.isChange = true
       const selectData = data
-      const writebackfield = this.allSourceData.config.writebackfield
+      const writebackfield = this.configData.writebackfield
       if (writebackfield) {
         // 解析回写字段
         writebackfield.forEach(item => {
@@ -436,7 +431,7 @@ export default {
      * 清除回写字段
      */
     clearWritebackfield() {
-      const writebackfield = this.allSourceData.config.writebackfield
+      const writebackfield = this.configData.writebackfield
       writebackfield.forEach(item => {
         const [v1, v2] = item.split('=')
         if (v2) {

src/packages/hs-table/src/child copy 3.vue

+<template>
+  <div class="_hs_table">
+    <div class='titleToolbox'>
+      <div v-show="tableConfig.title">{{tableConfig.title}}</div>
+      <div
+        v-show="tableConfig.toolDirection==='row'&&tableConfig.isShowTools"
+        class="toolButtonGroupBox"
+      >
+        <tool-row
+          :toolList='toolList'
+          @clickLabel='clickToolLabel'
+        ></tool-row>
+      </div>
+    </div>
+    <span
+      v-show="!tableConfig.toolDirection||tableConfig.toolDirection==='column'&&tableConfig.isShowTools"
+      class="iconTool"
+    >
+      <tool-column
+        :toolList='toolList'
+        @clickLabel='clickToolLabel'
+      ></tool-column>
+    </span>
+    <ux-grid
+      :data-changes-scroll-top='false'
+      :big-data-checkbox="true"
+      ref="plTable"
+      :data="tableData"
+      :height="tableHeight"
+      use-virtual
+      showHeaderOverflow="title"
+      border
+      :show-summary='showSummary'
+      :summary-method="getSummaries"
+      @select-all='selectAll'
+      @select='selectCheckBox'
+      @sort-change='sortChange'
+      @row-dblclick='rowDblclick'
+      @row-click="rowClick"
+      @selection-change='selectionChange'
+      :pagination-show="!!paging"
+      :total="pagingConfig.total"
+      :page-size="pagingConfig.per_page"
+      :current-page="pagingConfig.page"
+      :page-sizes='pageSizes'
+      @handlePageSize='handlePageSize'
+      :row-height="rowHeight"
+      :row-style='setRowStyle'
+    >
+
+      <template v-for='(column,index) in tableColumns'>
+        <template v-if="!column.childs">
+          <ux-table-column
+            v-if='column.showType==="expandChild"'
+            :key="index"
+            type="expand"
+            width='50px'
+            title='展开'
+          >
+            <template v-slot:content="{ row }">
+              <rowTable :rowTable='row._childTable'></rowTable>
+            </template>
+          </ux-table-column>
+          <ux-table-column
+            v-else-if="column.showType==='index'"
+            :key="index"
+            type="index"
+            width="55"
+          />
+          <ux-table-column
+            v-else-if="column.showType==='selection'"
+            :key="index"
+            type="checkbox"
+            width="55"
+            :selectable="selectable"
+          />
+          <ux-table-column
+            v-else-if='column.showType==="handleColumn"'
+            :key="index"
+            fixed="right"
+            label="操作"
+            :width='tableConfig.handleWidth'
+          >
+            <template slot-scope="scope">
+              <handle-column
+                :data='tableHandleColumns'
+                :row='scope.row'
+                :showItem='showItem'
+                :disabledItem='disabledItem'
+                @itemClickHandle='itemClickHandle'
+              />
+            </template>
+          </ux-table-column>
+          <ux-table-column
+            v-else
+            :key="index"
+            :resizable="column.resizable"
+            :show-overflow-tooltip="column.showOverflow"
+            :field="column.prop"
+            :title="column.label"
+            :fixed="column.fixed"
+            :min-width="column.width||80"
+            :sortable="column.isSort"
+          >
+            <template slot-scope="scope">
+              <i
+                v-if="column.type==='checkBox'"
+                :class="rowCellBoolean(scope.row[column.prop])"
+              ></i>
+              <childItem
+                v-else
+                v-bind="$attrs"
+                v-on="$listeners"
+                :editable='editable'
+                :item='column'
+                :prop="column.prop"
+                :formParms='scope.row'
+              >
+              </childItem>
+            </template>
+          </ux-table-column>
+        </template>
+        <template v-else-if='column.childs'>
+          <ux-table-column
+            :label="column.label"
+            :key="index"
+          >
+            <template v-for="item in column.childs">
+              <ux-table-column
+                :field="item.prop"
+                :title="item.label"
+                :key="item.label"
+                :min-width="column.width||80"
+              >
+                <template slot-scope="scope">
+                  <childItem
+                    :item='item'
+                    :formParms='scope.row'
+                    :editable='editable'
+                    v-bind="$attrs"
+                    v-on="$listeners"
+                  >
+                  </childItem>
+                </template>
+              </ux-table-column>
+            </template>
+          </ux-table-column>
+        </template>
+      </template>
+
+    </ux-grid>
+    <tbaleColumsSet
+      v-model="dialogVisibleTbaleColums"
+      :tableDataColums='tableDataColums'
+      @submit="submitTableColums"
+    ></tbaleColumsSet>
+  </div>
+</template>
+
+<script>
+import childItem from './ItemComponentChild'
+import tableTool from './tableColumsTrans'
+import tableToolComponentRow from './tableToolComponentRow'
+import tableToolComponentColumn from './tableToolComponentColumn'
+import tableHandleComponent from './tableHandleComponent'
+import { add } from 'mathjs'
+import _ from 'lodash'
+import tbaleColumsSet from '../../common/tbaleColumsSet'
+// import utilsExcel from '../../funTools/excel/utils_excel'
+import rowTable from './rowTable'
+import commonMixins from '../../ucClass/commonMixins'
+// import hsUtil from 'hs-util-js'
+import uuT from './exportExcel'
+export default {
+  mixins: [commonMixins],
+  components: {
+    childItem,
+    rowTable,
+    'tool-row': tableToolComponentRow,
+    'tool-column': tableToolComponentColumn,
+    'handle-column': tableHandleComponent,
+    tbaleColumsSet
+  },
+  props: {
+    getSourceData: {
+      type: Function
+    },
+    editable: {
+      default: false
+    },
+    // 数据
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    paging: {},
+    // 高度
+    height: {
+      default: '400px'
+    },
+    // 最大高度
+    maxHeight: {},
+    // 导入信息
+    importInfo: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      rowHeight: 35, // 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！
+      columns: [],
+      sysTemTool: [
+        // 系统按钮
+        '$tableColumnSet',
+        '$exportCurrPageData',
+        '$exportAllPageData'
+      ],
+      dialogVisibleTbaleColums: false,
+      tableDataColums: []
+    }
+  },
+  watch: {
+    tableData: {
+      handler: function(data) {
+        this.$nextTick(() => {
+          this.setIsSelectRowSelection(data)
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    pagingConfig() {
+      if (!this.paging) return {}
+      const { page, per_page, total, total_page } = this.paging
+      this.paging.page = Number(page)
+      this.paging.per_page = Number(per_page)
+      this.paging.total = Number(total)
+      this.paging.total_page = Number(total_page)
+      return this.paging
+    },
+    pageSizes: function() {
+      const per_page = this.pagingConfig.per_page
+      const list = [10, 20, 50, 100, 200, 1000]
+      if (!list.includes(per_page)) {
+        list.unshift(per_page)
+      }
+      return list
+    },
+    // 第一行数据
+    firstRow() {
+      return (this.data.length && this.data[0]) || {}
+    },
+    // 表格真实显示数据
+    tableData() {
+      const tdata = this.data
+      if (!tdata) return []
+      // 处理原始数据,把_id排除掉
+      const list = tdata.filter(item => !this.hasProp(item, '_id'))
+      list.forEach(row => {
+        const _data_prop_list = Object.keys(row).filter(prop =>
+          prop.includes('_data_')
+        )
+        _data_prop_list.forEach(prop => {
+          if (typeof row[prop] === 'string' && row[prop]) {
+            row[prop] = JSON.parse(row[prop])
+          }
+        })
+      })
+      return list
+    },
+    // 表格高度
+    tableHeight() {
+      return this.height
+    },
+    // 表格配置
+    tableConfig() {
+      return this.config
+    },
+    // 表格列
+    tableColumns() {
+      return this.dealWithColumns()
+    },
+    // 工具栏内容:实体上的到导入配置和表格上的toolItems节点构成
+    toolList: function() {
+      return this.dealWithToolList()
+    },
+    // 表格操作列
+    tableHandleColumns() {
+      return this.dealWithHandleColumns()
+    },
+    showSummary: function() {
+      const tkeys = Object.keys(this.total || {}) // 返回的数据中会有这样的一个total
+      const sumKey = this.tableColumns.find(item => item.summarizing)
+      return !!tkeys.length || !!sumKey
+    }
+  },
+  mounted() {},
+  methods: {
+    tableDoLayout() {
+      this.$refs.plTable.doLayout()
+    },
+    // 选中isSelect的row,设置选中状态
+    setIsSelectRowSelection(data) {
+      data
+        .filter(row => row.isSelected)
+        .forEach(item => {
+          this.setToggleRowSelection(item, true)
+        })
+    },
+    handlePageSize({ size, page }) {
+      const bindEntity = this.getBindEntity()
+      this.$emit(
+        'paginationFun',
+        {
+          elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
+          pageSize: size,
+          page: page
+        },
+        bindEntity
+      )
+    },
+    hasProp(item, prop) {
+      return prop in item
+    },
+
+    // 处理操作栏
+    dealWithHandleColumns() {
+      return this.tableConfig.handleColumns || []
+    },
+    // 处理列配置
+    dealWithColumns() {
+      const { columnsConfig } = this.tableConfig
+      const columnsConfigTable = _.cloneDeep(columnsConfig || [])
+      const columnsConfig_ = []
+      const columnsConfig_hide = []
+      columnsConfigTable.forEach(item => {
+        const { isHide, isShow } = item
+        const typeofHide = typeof isHide
+        const typeofShow = typeof isShow
+        let result = true
+        if (typeofShow === 'boolean') {
+          result = isShow
+        } else if (typeofShow === 'function') {
+          result = isShow()
+        } else if (typeofHide === 'boolean') {
+          result = !isHide
+        } else if (typeofHide === 'function') {
+          result = !isHide()
+        } else if (typeofHide === 'undefined' && typeofShow === 'undefined') {
+          result = true
+        }
+        if (result) {
+          columnsConfig_.push(item)
+        } else {
+          columnsConfig_hide.push(item)
+        }
+      })
+      // 根据配置中是否有*,来判断是否有动态列
+      const hasDyncProp = columnsConfig_.find(
+        item => item.prop && item.prop.includes('*')
+      )
+      let list = []
+      if (hasDyncProp) {
+        // 获取数组第一列的所有的属性值
+        let allColumns = []
+        if (Object.keys(this.firstRow).length) {
+          allColumns = Object.keys(this.firstRow)
+        }
+        const columnsConfig_hideProps = columnsConfig_hide.map(x => x.prop)
+        // 要把isSelected 、iUpdateStatus字段删除掉
+        const hideProps = [
+          'isSelected',
+          'iUpdateStatus',
+          ...columnsConfig_hideProps
+        ]
+        // 把下划线开头的字段删除掉,避免显示处理
+        _.remove(allColumns, x => {
+          return hideProps.includes(x) || x.startsWith('_')
+        })
+        list = tableTool.getTableColums(columnsConfig_, allColumns)
+      } else {
+        list = tableTool.getTableColums(columnsConfig_, [])
+      }
+      this.tableConfig.showIndex && list.unshift({ showType: 'index' })
+      this.tableConfig.selection && list.unshift({ showType: 'selection' })
+      this.tableConfig.expandChild && list.unshift({ showType: 'expandChild' })
+      this.tableConfig.showHandle && list.push({ showType: 'handleColumn' })
+      return list
+    },
+    dealWithToolList() {
+      const newList = []
+      const newVal_ = _.cloneDeep(this.importInfo)
+      const toolItems = _.cloneDeep(this.tableConfig.toolItems || [])
+      newList.push(...newVal_, ...toolItems)
+      // 把显示的筛选出来,显示的才继续判断是否禁用
+      newList.forEach(item => {
+        item.isShow = this.showItem(item)
+        item.isShow && (item.isDisabled = this.disabledItem(item))
+      })
+      return newList.filter(item => item.isShow)
+    },
+    showItem(item, row) {
+      const { isHide, isShow } = item
+      const type_isHide = typeof isHide
+      const type_isShow = typeof isShow
+      const data = { row, item }
+      if (type_isShow === 'boolean') {
+        return isShow
+      } else if (type_isHide === 'boolean') {
+        return !isHide
+      } else if (type_isHide === 'function') {
+        try {
+          return !isHide(data)
+        } catch (error) {
+          console.log(error)
+          const funName = '$' + isHide
+          this.$message.error(`${funName} 有误`)
+        }
+      } else if (type_isShow === 'function') {
+        try {
+          return isShow(data)
+        } catch (error) {
+          console.log(error)
+          const funName = '$' + isShow
+          this.$message.error(`${funName} 有误`)
+        }
+      } else {
+        return true
+      }
+    },
+    disabledItem(item, row) {
+      const { disabled, disabledLogicOperation, disabledLevel, click } = item
+      if (this.sysTemTool.includes(click) && !disabled) return false
+      // disabledLogicOperation 表示是否禁用
+      const disabledLogicOperationValue =
+        typeof disabledLogicOperation === 'boolean'
+          ? disabledLogicOperation
+          : false
+      const type = typeof disabled
+      const innerStatus = this.disabled && this.editable
+      const data = { row, item }
+      if (disabledLevel === 1) {
+        if (type === 'boolean' || type === 'undefined') {
+          return disabled
+        } else if (type === 'function') {
+          return disabled(data)
+        }
+      } else {
+        if (type === 'boolean' || type === 'undefined') {
+          return disabled || innerStatus || disabledLogicOperationValue
+        } else if (type === 'function') {
+          return disabled(data) || innerStatus || disabledLogicOperationValue
+        }
+      }
+    },
+    getBindEntity() {
+      const bindEntity = this.tableConfig.bindEntity
+      return bindEntity || 'dtl'
+    },
+    clickToolLabel(item) {
+      const { click } = item
+      const type = typeof click
+      const bindEntity = this.getBindEntity()
+      if (type === 'string' && click.startsWith('$')) {
+        const item_ = Object.assign({}, item)
+        item_.click = item_.click.substr(1)
+        switch (item_.click) {
+          case 'exportCurrPageData':
+            this.exportExcel(1)
+            break
+          case 'exportAllPageData':
+            this.exportExcel(2)
+            break
+          case 'tableColumnSet':
+            this.tableColumnSet()
+            break
+          default:
+            this.$emit(
+              'toolClick',
+              item_,
+              bindEntity,
+              this.tableData,
+              this.tableConfig
+            )
+            break
+        }
+      } else if (type === 'function') {
+        click(item, bindEntity)
+      }
+    },
+    /**
+     * 排序方法
+     */
+    sortChange({ column, prop, order }) {
+      const sortData = {
+        order: this.dealWithOrderValue(order),
+        prop
+      }
+      debugger
+      this.$emit('sortChange', sortData, this.getBindEntity())
+    },
+    /**
+     * 处理排序值
+     */
+    dealWithOrderValue(order) {
+      if (order === 'descending' || order === 'desc') return 0
+      if (order === 'ascending' || order === 'asc') return 1
+      if (!order) return ''
+    },
+    rowDblclick(row, column, event) {
+      const disaledDblClick = this.tableConfig.disaledDblClick
+      if (!disaledDblClick) {
+        const bindEntity = this.getBindEntity()
+        this.$emit('tableRowDblclick', row, bindEntity)
+      }
+    },
+    rowClick(row, column, event) {
+      const bindEntity = this.getBindEntity()
+      this.$emit(
+        'rowClick',
+        {
+          row: row,
+          column: column,
+          event: event
+        },
+        bindEntity
+      )
+    },
+    selectionChange(data) {
+      this.$emit('selectionChange', data)
+    },
+    emitSetCurrentRow(row) {
+      const bindEntity = this.getBindEntity()
+      if (!row) {
+        this.$emit('setCurrentRow', null, bindEntity)
+      } else {
+        row.isSelected = true
+        const bindEntity = this.getBindEntity()
+        this.$emit('setCurrentRow', row, bindEntity)
+      }
+    },
+    getSummaries1({ columns, data }) {
+      // 平均值算法（不需要自己去掉）
+      function cacl(arr, callback) {
+        let ret
+        for (let i = 0; i < arr.length; i++) {
+          ret = callback(arr[i], ret)
+        }
+        return ret
+      }
+      // 平均值算法（不需要自己去掉）
+      Array.prototype.sum = function() {
+        return cacl(this, function(item, sum) {
+          if (typeof sum === 'undefined') {
+            return item
+          } else {
+            return (sum += item)
+          }
+        })
+      }
+      // 平均值算法（不需要自己去掉）
+      Array.prototype.avg = function() {
+        if (this.length == 0) {
+          return 0
+        }
+        return this.sum(this) / this.length
+      }
+      const means = [] // 合计
+      const fenceSums = [] // 平均值
+      columns.forEach((column, columnIndex) => {
+        if (columnIndex === 0) {
+          means.push('合计')
+          fenceSums.push('平均值')
+        } else {
+          const values = data.map(item => Number(item[column.property]))
+          // 合计
+          if (!values.every(value => isNaN(value))) {
+            means[columnIndex] = values.reduce((prev, curr) => {
+              const value = Number(curr)
+              if (!isNaN(value)) {
+                return prev + curr
+              } else {
+                return prev
+              }
+            }, 0)
+            // means[columnIndex] += ' 元'
+            // 改变了ele的合计方式，扩展了合计场景
+            // 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
+            // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
+            means[columnIndex] =
+              '<span style="color: red">' + means[columnIndex] + '</span><br/>'
+          } else {
+            means[columnIndex] = ''
+          }
+          // 平均值
+          const precisions = []
+          let notNumber = true
+          values.forEach(value => {
+            if (!isNaN(value)) {
+              notNumber = false
+              const decimal = ('' + value).split('.')[1]
+              precisions.push(decimal ? decimal.length : 0)
+            }
+          })
+          if (!notNumber) {
+            fenceSums[columnIndex] = values.avg()
+          } else {
+            fenceSums[columnIndex] = ''
+          }
+        }
+      })
+      // 返回一个二维数组的表尾合计(不要平均值，你就不要在数组中添加)
+      return [means]
+    },
+    getSummaries(param) {
+      const { columns } = param
+      const sums = []
+      const sumKey = this.tableColumns.reduce((prve, curr) => {
+        if (curr.summarizing) {
+          prve.push(curr.prop)
+        }
+        return prve
+      }, [])
+      const sumObj = {}
+      sumKey.forEach(key => {
+        sumObj[key] = 0
+        this.tableData.forEach(item => {
+          if (item[key]) {
+            // 利用mathjs 来计算精度问题
+            // sumObj[key] = NP.plus(sumObj[key], Number(item[key]))
+            sumObj[key] = add(sumObj[key], Number(item[key]))
+            // sumObj[key] += Number(item[key])
+          }
+        })
+      })
+      const total_ = Object.assign(_.cloneDeep(this.total || {}))
+      const tkeys = Object.keys(total_)
+      columns.forEach((column, index) => {
+        const { property } = column
+        if (index === 0) {
+          sums[index] = '合计'
+        } else if (tkeys.length) {
+          if (tkeys.includes(property)) {
+            sums[index] = total_[property]
+          } else {
+            sums[index] = ''
+          }
+        } else if (sumKey.length) {
+          if (sumKey.includes(property)) {
+            sums[index] = sumObj[property]
+          } else {
+            sums[index] = ''
+          }
+        }
+      })
+      return [sums]
+    },
+    selectAll(selection) {
+      this.tableData.forEach(item => {
+        item.isSelected = !!selection.length
+      })
+      if (!selection.length) {
+        // 清空时 去掉当前行
+        this.emitSetCurrentRow(null, false)
+      }
+    },
+    setToggleRowSelection(row, flag) {
+      if (!row) return
+      this.$refs.plTable &&
+        this.$refs.plTable.toggleRowSelection([
+          // 设置当前行选中
+          {
+            row,
+            selected: !!flag
+          }
+        ])
+      row.isSelected = !!flag
+    },
+    selectCheckBox(selection, row) {
+      row.isSelected = !row.isSelected
+      this.$refs.plTable.setCurrentRow(row)
+      this.rowClick(row)
+    },
+    selectable(row, index) {
+      return true
+    },
+    /* 操作列按钮点击
+     * item 按钮信息
+     * index 当前行所在行数
+     * row 当前行
+     */
+    async itemClickHandle(item, row, index) {
+      // this.setToggleRowSelection(row, true)
+      const { click, confirm } = item
+      if (confirm) {
+        // 点击后弹出提示语
+        const confirmObj = {}
+        if (typeof confirm === 'string') {
+          confirmObj.confirmText = confirm
+          confirmObj.confirmButtonText = '确定'
+          confirmObj.cancelButtonText = '取消'
+        } else {
+          const { confirmButtonText, cancelButtonText, confirmText } = confirm
+          confirmObj.confirmText = confirmText
+          confirmObj.confirmButtonText = confirmButtonText || '确定'
+          confirmObj.cancelButtonText = cancelButtonText || '取消'
+        }
+        const r = await this.$confirm(confirmObj.confirmText, '提示', {
+          confirmButtonText: confirmObj.confirmButtonText,
+          cancelButtonText: confirmObj.cancelButtonText,
+          type: 'warning'
+        })
+        if (r !== 'confirm') {
+          return
+        }
+      }
+      const type = typeof click
+      const bindEntity = this.getBindEntity()
+      if (type === 'string' && click.startsWith('$')) {
+        const item_ = Object.assign({}, item) // 拷贝一份item
+        item_.click = item_.click.substr(1)
+        this.$emit('handleClick', row, item_, bindEntity)
+      } else if (type === 'function') {
+        click(row, item, bindEntity)
+      }
+    },
+    tableColumnSet() {
+      const config = _.cloneDeep(this.tableConfig)
+      if (config && config.columnsConfig && config.columnsConfig.length) {
+        this.tableDataColums = [...config.columnsConfig]
+      } else {
+        this.tableDataColums = [{}]
+      }
+      this.tableDataColums.forEach((item, index) => {
+        if (item.childs) {
+          this.tableDataColums.splice(index, 1, ...item.childs)
+        }
+      })
+      this.dialogVisibleTbaleColums = true
+    },
+    getPageInfo(info = this.elInfo) {
+      const data = {
+        controlName: info.position
+      }
+      return this.$listeners.webChartConfigQuery(data)
+    },
+    async submitTableColums(data, flage) {
+      const res = await this.getPageInfo()
+      let paramsData = {}
+      const resData = res.data
+      if (!resData || (Array.isArray(resData) && !resData.length)) {
+        paramsData.json_config = JSON.stringify(this.config || {})
+        paramsData.json_data = JSON.stringify(this.data || [])
+        paramsData.is_mock = 1
+        paramsData.query_sql = ''
+      } else if (Array.isArray(resData) && resData.length) {
+        paramsData = resData[0]
+      }
+      const { query_sql, json_config, json_data, is_mock } = paramsData
+      const json_config_ = JSON.parse(json_config)
+      json_config_.columnsConfig = data
+      const dataw = {
+        controlName: this.elInfo.position,
+        config: json_config_,
+        data: JSON.parse(json_data),
+        querySql: query_sql,
+        mockData: is_mock ? 1 : 0
+      }
+      this.$listeners.webChartConfigSave(dataw).then(res => {
+        if (flage !== 'columnStyleSet') {
+          this.dialogVisibleTbaleColums = false
+        }
+        this.tableConfig.columnsConfig = data
+      })
+    },
+    async exportExcel(flage) {
+      const data = this.tableData
+      const columnsProp_ = []
+      this.tableColumns.forEach(item => {
+        if (item.childs) {
+          columnsProp_.push(...item.childs)
+        } else {
+          columnsProp_.push(item)
+        }
+      })
+      const tHeader = []
+      // 筛选出具有实际意义的列(包含prop)
+      columnsProp_
+        .filter(item => item.prop)
+        .forEach(item => {
+          const str = item.label
+            ? `${item.label}=${item.prop}`
+            : `${item.prop}=${item.prop}`
+          tHeader.push(str)
+        })
+      const exportExcelName = this.tableConfig.exportExcelName || '表'
+      if (flage === 2) {
+        const bindEntity = this.getBindEntity()
+        const result = await this.getSourceData(bindEntity)
+        if (Array.isArray(result) && result.length) {
+          let exportExcelData = []
+          if (result[0].json_data) {
+            const json_data =
+              typeof result[0].json_data === 'string'
+                ? JSON.parse(result[0].json_data)
+                : result[0].json_data
+            exportExcelData = Array.isArray(json_data)
+              ? json_data
+              : json_data.table
+          } else {
+            exportExcelData = result
+          }
+          uuT.exportToExcel(tHeader, exportExcelData, exportExcelName)
+        } else {
+          this.$message.warning('暂无数据~')
+        }
+      } else {
+        uuT.exportToExcel(tHeader, data, exportExcelName)
+      }
+    },
+    rowCellBoolean(value) {
+      if (Number(value)) {
+        return 'el-icon-check'
+      } else {
+        return 'el-icon-close'
+      }
+    },
+    setRowStyle({ row }) {
+      const { usable, bUsable, bDisabled, bill_status } = row
+      const valuelist = [false, 0, '0']
+      if (
+        Number(bill_status) === 5 ||
+        valuelist.includes(usable) ||
+        valuelist.includes(bUsable) ||
+        valuelist.includes(bDisabled)
+      ) {
+        return {
+          'text-decoration': 'line-through',
+          color: '#afafaf'
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.iconTool {
+  position: absolute;
+  right: 0;
+  z-index: 100;
+}
+._hs_table >>> .plTableBox .myPagination {
+  padding-top: 0;
+}
+</style>
+<style>
+/* ._hs_table .el-table::before,
+._hs_table .el-table::after {
+  height: 0 !important;
+}
+._hs_table body .el-table th.gutter {
+  display: table-cell !important;
+} */
+/*滑块轨道*/
+._hs_table .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+/*轨道*/
+._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}
+._hs_table .el-table::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}
+._hs_table .el-table::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  opacity: 0.7;
+}
+._hs_table ::-webkit-scrollbar {
+  width: 0px;
+  background-color: transparent;
+}
+.elLink {
+  margin: 0 3px;
+  font-size: 12px;
+}
+.toolButtonGroupBox {
+  display: flex;
+  justify-content: flex-end;
+}
+.titleToolbox {
+  display: flex;
+  justify-content: space-between;
+}
+.eldropdownitem {
+  width: 100px;
+  padding: 10px;
+  text-align: center;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+  margin-left: 10px;
+}
+.el-table__body tbody td {
+  padding: 0 !important;
+}
+
+.el-table td,
+.el-table th {
+  padding: 0 !important;
+}
+.el-table .cell {
+  padding-right: 0;
+}
+td {
+  height: 35px !important;
+}
+</style>
+

src/packages/hs-table/src/child copy 4.vue

+<template>
+  <div class="_hs_table">
+    <div class='titleToolbox'>
+      <div v-show="tableConfig.title">{{tableConfig.title}}</div>
+      <div
+        v-show="tableConfig.toolDirection==='row'&&tableConfig.isShowTools"
+        class="toolButtonGroupBox"
+      >
+        <tool-row
+          :toolList='toolList'
+          @clickLabel='clickToolLabel'
+        ></tool-row>
+      </div>
+    </div>
+    <span
+      v-show="!tableConfig.toolDirection||tableConfig.toolDirection==='column'&&tableConfig.isShowTools"
+      class="iconTool"
+    >
+      <tool-column
+        :toolList='toolList'
+        @clickLabel='clickToolLabel'
+      ></tool-column>
+    </span>
+    <template v-if='!tableConfig.expandChild'>
+    <u-table
+      :data-changes-scroll-top='false'
+      :big-data-checkbox="true"
+      ref="plTable"
+      :data="tableData"
+      :height="tableHeight"
+      use-virtual
+      showHeaderOverflow="title"
+      border
+      :show-summary='showSummary'
+      :summary-method="getSummaries"
+      @select-all='selectAll'
+      @select='selectCheckBox'
+      @sort-change='sortChange'
+      @row-dblclick='rowDblclick'
+      @row-click="rowClick"
+      @selection-change='selectionChange'
+      :pagination-show="!!paging"
+      :total="pagingConfig.total"
+      :page-size="pagingConfig.per_page"
+      :current-page="pagingConfig.page"
+      :page-sizes='pageSizes'
+      @handlePageSize='handlePageSize'
+      :row-height="rowHeight"
+      :row-style='setRowStyle'
+    >
+
+      <template v-for='(column,index) in tableColumns'>
+        <template v-if="!column.childs">
+          <u-table-column
+            v-if='tableConfig.expandChild'
+            :key="index"
+            type="expand"
+          >
+            <template slot-scope="props">
+              <rowTable :rowTable='props.row._childTable'></rowTable>
+            </template>
+          </u-table-column>
+          <u-table-column
+            v-else-if="column.showType==='index'"
+            :key="index"
+            type="index"
+            width="55"
+          />
+          <u-table-column
+            v-else-if="column.showType==='selection'"
+            :key="index"
+            type="selection"
+            width="55"
+            :selectable="selectable"
+          />
+          <u-table-column
+            v-else-if='column.showType==="handleColumn"'
+            :key="index"
+            fixed="right"
+            label="操作"
+            :width='tableConfig.handleWidth'
+          >
+            <template slot-scope="scope">
+              <handle-column
+                :data='tableHandleColumns'
+                :row='scope.row'
+                :showItem='showItem'
+                :disabledItem='disabledItem'
+                @itemClickHandle='itemClickHandle'
+              />
+            </template>
+          </u-table-column>
+          <u-table-column
+            v-else
+            :key="index"
+            :resizable="column.resizable"
+            :show-overflow-tooltip="column.showOverflow"
+            :prop="column.prop"
+            :label="column.label"
+            :fixed="column.fixed"
+            :min-width="column.width||80"
+            :sortable="column.isSort?'custom':false"
+          >
+            <template slot-scope="scope">
+              <i
+                v-if="column.type==='checkBox'"
+                :class="rowCellBoolean(scope.row[column.prop])"
+              ></i>
+              <childItem
+                v-else
+                :fromWhere='fromWhere'
+                v-bind="$attrs"
+                v-on="$listeners"
+                :item='column'
+                :prop="column.prop"
+                :formParms='scope.row'
+              >
+              </childItem>
+            </template>
+          </u-table-column>
+        </template>
+        <template v-else-if='column.childs'>
+          <u-table-column
+            :label="column.label"
+            :key="index"
+          >
+            <template v-for="item in column.childs">
+              <u-table-column
+                :prop="item.prop"
+                :label="item.label"
+                :key="item.label"
+                :min-width="column.width||80"
+              >
+                <template slot-scope="scope">
+                  <childItem
+                    :item='item'
+                    :formParms='scope.row'
+                    v-bind="$attrs"
+                    v-on="$listeners"
+                    :fromWhere='fromWhere'
+                  >
+                  </childItem>
+                </template>
+              </u-table-column>
+            </template>
+          </u-table-column>
+        </template>
+      </template>
+    </u-table>
+    </template>
+    <template v-else>
+    <ux-grid
+      :data-changes-scroll-top='false'
+      :big-data-checkbox="true"
+      ref="plTable"
+      :data="tableData"
+      :height="tableHeight"
+      use-virtual
+      showHeaderOverflow="title"
+      border
+      :show-summary='showSummary'
+      :summary-method="getSummaries"
+      @select-all='selectAll'
+      @select='selectCheckBox'
+      @sort-change='sortChange'
+      @row-dblclick='rowDblclick'
+      @row-click="rowClick"
+      @selection-change='selectionChange'
+      :pagination-show="!!paging"
+      :total="pagingConfig.total"
+      :page-size="pagingConfig.per_page"
+      :current-page="pagingConfig.page"
+      :page-sizes='pageSizes'
+      @handlePageSize='handlePageSize'
+      :row-height="rowHeight"
+      :row-style='setRowStyle'
+    >
+
+      <template v-for='(column,index) in tableColumns'>
+        <template v-if="!column.childs">
+          <ux-table-column
+            v-if='column.showType==="expandChild"'
+            :key="index"
+            type="expand"
+            width='50px'
+            title='展开'
+          >
+            <template v-slot:content="{ row }">
+              <rowTable :rowTable='row._childTable'></rowTable>
+            </template>
+          </ux-table-column>
+          <ux-table-column
+            v-else-if="column.showType==='index'"
+            :key="index"
+            type="index"
+            width="55"
+          />
+          <ux-table-column
+            v-else-if="column.showType==='selection'"
+            :key="index"
+            type="checkbox"
+            width="55"
+            :selectable="selectable"
+          />
+          <ux-table-column
+            v-else-if='column.showType==="handleColumn"'
+            :key="index"
+            fixed="right"
+            label="操作"
+            :width='tableConfig.handleWidth'
+          >
+            <template slot-scope="scope">
+              <handle-column
+                :data='tableHandleColumns'
+                :row='scope.row'
+                :showItem='showItem'
+                :disabledItem='disabledItem'
+                @itemClickHandle='itemClickHandle'
+              />
+            </template>
+          </ux-table-column>
+          <ux-table-column
+            v-else
+            :key="index"
+            :resizable="column.resizable"
+            :show-overflow-tooltip="column.showOverflow"
+            :field="column.prop"
+            :title="column.label"
+            :fixed="column.fixed"
+            :min-width="column.width||80"
+            :sortable="column.isSort"
+          >
+            <template slot-scope="scope">
+              <i
+                v-if="column.type==='checkBox'"
+                :class="rowCellBoolean(scope.row[column.prop])"
+              ></i>
+              <childItem
+                v-else
+                v-bind="$attrs"
+                v-on="$listeners"
+                :editable='editable'
+                :item='column'
+                :prop="column.prop"
+                :formParms='scope.row'
+              >
+              </childItem>
+            </template>
+          </ux-table-column>
+        </template>
+        <template v-else-if='column.childs'>
+          <ux-table-column
+            :label="column.label"
+            :key="index"
+          >
+            <template v-for="item in column.childs">
+              <ux-table-column
+                :field="item.prop"
+                :title="item.label"
+                :key="item.label"
+                :min-width="column.width||80"
+              >
+                <template slot-scope="scope">
+                  <childItem
+                    :item='item'
+                    :formParms='scope.row'
+                    :editable='editable'
+                    v-bind="$attrs"
+                    v-on="$listeners"
+                  >
+                  </childItem>
+                </template>
+              </ux-table-column>
+            </template>
+          </ux-table-column>
+        </template>
+      </template>
+
+    </ux-grid>
+    </template>
+
+    <tbaleColumsSet
+      v-model="dialogVisibleTbaleColums"
+      :tableDataColums='tableDataColums'
+      @submit="submitTableColums"
+    ></tbaleColumsSet>
+  </div>
+</template>
+
+<script>
+import childItem from './ItemComponentChild'
+import tableTool from './tableColumsTrans'
+import tableToolComponentRow from './tableToolComponentRow'
+import tableToolComponentColumn from './tableToolComponentColumn'
+import tableHandleComponent from './tableHandleComponent'
+import { add } from 'mathjs'
+import _ from 'lodash'
+import tbaleColumsSet from '../../common/tbaleColumsSet'
+import utilsExcel from '../../funTools/excel/utils_excel'
+import rowTable from './rowTable'
+import commonMixins from '../../ucClass/commonMixins'
+export default {
+  mixins: [commonMixins],
+  components: {
+    childItem,
+    rowTable,
+    'tool-row': tableToolComponentRow,
+    'tool-column': tableToolComponentColumn,
+    'handle-column': tableHandleComponent,
+    tbaleColumsSet
+  },
+  props: {
+    getSourceData: {
+      type: Function
+    },
+    fromWhere: {
+      default: 'list'
+    },
+    // 数据
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    paging: {},
+    // 高度
+    height: {
+      default: '400px'
+    },
+    // 最大高度
+    maxHeight: {},
+    // 导入信息
+    importInfo: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      rowHeight: 35, // 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！
+      columns: [],
+      sysTemTool: [
+        // 系统按钮
+        '$tableColumnSet',
+        '$exportCurrPageData',
+        '$exportAllPageData'
+      ],
+      dialogVisibleTbaleColums: false,
+      tableDataColums: []
+    }
+  },
+  watch: {
+    tableData: {
+      handler: function(data) {
+        this.$nextTick(() => {
+          this.setIsSelectRowSelection(data)
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    pagingConfig() {
+      if (!this.paging) return {}
+      const { page, per_page, total, total_page } = this.paging
+      this.paging.page = Number(page)
+      this.paging.per_page = Number(per_page)
+      this.paging.total = Number(total)
+      this.paging.total_page = Number(total_page)
+      return this.paging
+    },
+    pageSizes: function() {
+      const per_page = this.pagingConfig.per_page
+      const list = [10, 20, 50, 100, 200, 1000]
+      if (!list.includes(per_page)) {
+        list.unshift(per_page)
+      }
+      return list
+    },
+    // 第一行数据
+    firstRow() {
+      return (this.data.length && this.data[0]) || {}
+    },
+    // 表格真实显示数据
+    tableData() {
+      const tdata = this.data
+      if (!tdata) return []
+      // 处理原始数据,把_id排除掉
+      const list = tdata.filter(item => !this.hasProp(item, '_id'))
+      list.forEach(row => {
+        const _data_prop_list = Object.keys(row).filter(prop =>
+          prop.includes('_data_')
+        )
+        _data_prop_list.forEach(prop => {
+          if (typeof row[prop] === 'string' && row[prop]) {
+            row[prop] = JSON.parse(row[prop])
+          }
+        })
+      })
+      return list
+    },
+    // 表格高度
+    tableHeight() {
+      return this.height
+    },
+    // 表格配置
+    tableConfig() {
+      return this.config
+    },
+    // 表格列
+    tableColumns() {
+      return this.dealWithColumns()
+    },
+    // 工具栏内容:实体上的到导入配置和表格上的toolItems节点构成
+    toolList: function() {
+      return this.dealWithToolList()
+    },
+    // 表格操作列
+    tableHandleColumns() {
+      return this.dealWithHandleColumns()
+    },
+    showSummary: function() {
+      const tkeys = Object.keys(this.total || {}) // 返回的数据中会有这样的一个total
+      const sumKey = this.tableColumns.find(item => item.summarizing)
+      return !!tkeys.length || !!sumKey
+    }
+  },
+  mounted() {},
+  methods: {
+    tableDoLayout() {
+      this.$refs.plTable.doLayout()
+    },
+    // 选中isSelect的row,设置选中状态
+    setIsSelectRowSelection(data) {
+      data
+        .filter(row => row.isSelected)
+        .forEach(item => {
+          this.setToggleRowSelection(item, true)
+        })
+    },
+    handlePageSize({ size, page }) {
+      const bindEntity = this.getBindEntity()
+      this.$emit(
+        'paginationFun',
+        {
+          elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
+          pageSize: size,
+          page: page
+        },
+        bindEntity
+      )
+    },
+    hasProp(item, prop) {
+      return prop in item
+    },
+
+    // 处理操作栏
+    dealWithHandleColumns() {
+      return this.tableConfig.handleColumns || []
+    },
+    // 处理列配置
+    dealWithColumns() {
+      const { columnsConfig } = this.tableConfig
+      const columnsConfigTable = _.cloneDeep(columnsConfig || [])
+      const columnsConfig_ = []
+      const columnsConfig_hide = []
+      columnsConfigTable.forEach(item => {
+        const { isHide, isShow } = item
+        const typeofHide = typeof isHide
+        const typeofShow = typeof isShow
+        let result = true
+        if (typeofShow === 'boolean') {
+          result = isShow
+        } else if (typeofShow === 'function') {
+          result = isShow()
+        } else if (typeofHide === 'boolean') {
+          result = !isHide
+        } else if (typeofHide === 'function') {
+          result = !isHide()
+        } else if (typeofHide === 'undefined' && typeofShow === 'undefined') {
+          result = true
+        }
+        if (result) {
+          columnsConfig_.push(item)
+        } else {
+          columnsConfig_hide.push(item)
+        }
+      })
+      // 根据配置中是否有*,来判断是否有动态列
+      const hasDyncProp = columnsConfig_.find(
+        item => item.prop && item.prop.includes('*')
+      )
+      let list = []
+      if (hasDyncProp) {
+        // 获取数组第一列的所有的属性值
+        let allColumns = []
+        if (Object.keys(this.firstRow).length) {
+          allColumns = Object.keys(this.firstRow)
+        }
+        const columnsConfig_hideProps = columnsConfig_hide.map(x => x.prop)
+        // 要把isSelected 、iUpdateStatus字段删除掉
+        const hideProps = [
+          'isSelected',
+          'iUpdateStatus',
+          ...columnsConfig_hideProps
+        ]
+        // 把下划线开头的字段删除掉,避免显示处理
+        _.remove(allColumns, x => {
+          return hideProps.includes(x) || x.startsWith('_')
+        })
+        list = tableTool.getTableColums(columnsConfig_, allColumns)
+      } else {
+        list = tableTool.getTableColums(columnsConfig_, [])
+      }
+      this.tableConfig.showIndex && list.unshift({ showType: 'index' })
+      this.tableConfig.selection && list.unshift({ showType: 'selection' })
+      this.tableConfig.expandChild && list.unshift({ showType: 'expandChild' })
+      this.tableConfig.showHandle && list.push({ showType: 'handleColumn' })
+      return list
+    },
+    dealWithToolList() {
+      const newList = []
+      const newVal_ = _.cloneDeep(this.importInfo)
+      const toolItems = _.cloneDeep(this.tableConfig.toolItems || [])
+      newList.push(...newVal_, ...toolItems)
+      // 把显示的筛选出来,显示的才继续判断是否禁用
+      newList.forEach(item => {
+        item.isShow = this.showItem(item)
+        item.isShow && (item.isDisabled = this.disabledItem(item))
+      })
+      return newList.filter(item => item.isShow)
+    },
+    showItem(item, row) {
+      const { isHide, isShow } = item
+      const type_isHide = typeof isHide
+      const type_isShow = typeof isShow
+      const data = { row, item }
+      if (type_isShow === 'boolean') {
+        return isShow
+      } else if (type_isHide === 'boolean') {
+        return !isHide
+      } else if (type_isHide === 'function') {
+        try {
+          return !isHide(data)
+        } catch (error) {
+          console.log(error)
+          const funName = '$' + isHide
+          this.$message.error(`${funName} 有误`)
+        }
+      } else if (type_isShow === 'function') {
+        try {
+          return isShow(data)
+        } catch (error) {
+          console.log(error)
+          const funName = '$' + isShow
+          this.$message.error(`${funName} 有误`)
+        }
+      } else {
+        return true
+      }
+    },
+    disabledItem(item, row) {
+      const { disabled, disabledLogicOperation, disabledLevel, click } = item
+      if (this.sysTemTool.includes(click) && !disabled) return false
+      // disabledLogicOperation 表示是否禁用
+      const disabledLogicOperationValue =
+        typeof disabledLogicOperation === 'boolean'
+          ? disabledLogicOperation
+          : false
+      const type = typeof disabled
+      const innerStatus = this.disabled && this.fromWhere === 'hdrDtl'
+      const data = { row, item }
+      if (disabledLevel === 1) {
+        if (type === 'boolean' || type === 'undefined') {
+          return disabled
+        } else if (type === 'function') {
+          return disabled(data)
+        }
+      } else {
+        if (type === 'boolean' || type === 'undefined') {
+          return disabled || innerStatus || disabledLogicOperationValue
+        } else if (type === 'function') {
+          return disabled(data) || innerStatus || disabledLogicOperationValue
+        }
+      }
+    },
+    getBindEntity() {
+      const bindEntity = this.tableConfig.bindEntity
+      if (bindEntity) return bindEntity
+      if (this.fromWhere === 'hdrDtl') return 'dtl'
+    },
+    clickToolLabel(item) {
+      const { click } = item
+      const type = typeof click
+      const bindEntity = this.getBindEntity()
+      if (type === 'string' && click.startsWith('$')) {
+        const item_ = Object.assign({}, item)
+        item_.click = item_.click.substr(1)
+        switch (item_.click) {
+          case 'exportCurrPageData':
+            this.exportExcel(1)
+            break
+          case 'exportAllPageData':
+            this.exportExcel(2)
+            break
+          case 'tableColumnSet':
+            this.tableColumnSet()
+            break
+          default:
+            this.$emit(
+              'toolClick',
+              item_,
+              bindEntity,
+              this.tableData,
+              this.tableConfig
+            )
+            break
+        }
+      } else if (type === 'function') {
+        click(item, bindEntity)
+      }
+    },
+    /**
+     * 排序方法
+     */
+    sortChange({ column, prop, order }) {
+      const sortData = {
+        order: this.dealWithOrderValue(order),
+        prop
+      }
+      this.$emit('sortChange', sortData, this.getBindEntity())
+    },
+    /**
+     * 处理排序值
+     */
+    dealWithOrderValue(order) {
+      if (order === 'descending') return 0
+      if (order === 'ascending') return 1
+      if (!order) return ''
+    },
+    rowDblclick(row, column, event) {
+      const disaledDblClick = this.tableConfig.disaledDblClick
+      if (!disaledDblClick) {
+        const bindEntity = this.getBindEntity()
+        this.$emit('tableRowDblclick', row, bindEntity)
+      }
+    },
+    rowClick(row, column, event) {
+      const bindEntity = this.getBindEntity()
+      this.$emit(
+        'rowClick',
+        {
+          row: row,
+          column: column,
+          event: event
+        },
+        bindEntity
+      )
+    },
+    selectionChange(data) {
+      this.$emit('selectionChange', data)
+    },
+    emitSetCurrentRow(row) {
+      const bindEntity = this.getBindEntity()
+      if (!row) {
+        this.$emit('setCurrentRow', null, bindEntity)
+      } else {
+        row.isSelected = true
+        const bindEntity = this.getBindEntity()
+        this.$emit('setCurrentRow', row, bindEntity)
+      }
+    },
+    getSummaries1({ columns, data }) {
+      // 平均值算法（不需要自己去掉）
+      function cacl(arr, callback) {
+        let ret
+        for (let i = 0; i < arr.length; i++) {
+          ret = callback(arr[i], ret)
+        }
+        return ret
+      }
+      // 平均值算法（不需要自己去掉）
+      Array.prototype.sum = function() {
+        return cacl(this, function(item, sum) {
+          if (typeof sum === 'undefined') {
+            return item
+          } else {
+            return (sum += item)
+          }
+        })
+      }
+      // 平均值算法（不需要自己去掉）
+      Array.prototype.avg = function() {
+        if (this.length == 0) {
+          return 0
+        }
+        return this.sum(this) / this.length
+      }
+      const means = [] // 合计
+      const fenceSums = [] // 平均值
+      columns.forEach((column, columnIndex) => {
+        if (columnIndex === 0) {
+          means.push('合计')
+          fenceSums.push('平均值')
+        } else {
+          const values = data.map(item => Number(item[column.property]))
+          // 合计
+          if (!values.every(value => isNaN(value))) {
+            means[columnIndex] = values.reduce((prev, curr) => {
+              const value = Number(curr)
+              if (!isNaN(value)) {
+                return prev + curr
+              } else {
+                return prev
+              }
+            }, 0)
+            // means[columnIndex] += ' 元'
+            // 改变了ele的合计方式，扩展了合计场景
+            // 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
+            // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
+            means[columnIndex] =
+              '<span style="color: red">' + means[columnIndex] + '</span><br/>'
+          } else {
+            means[columnIndex] = ''
+          }
+          // 平均值
+          const precisions = []
+          let notNumber = true
+          values.forEach(value => {
+            if (!isNaN(value)) {
+              notNumber = false
+              const decimal = ('' + value).split('.')[1]
+              precisions.push(decimal ? decimal.length : 0)
+            }
+          })
+          if (!notNumber) {
+            fenceSums[columnIndex] = values.avg()
+          } else {
+            fenceSums[columnIndex] = ''
+          }
+        }
+      })
+      // 返回一个二维数组的表尾合计(不要平均值，你就不要在数组中添加)
+      return [means]
+    },
+    getSummaries(param) {
+      const { columns } = param
+      const sums = []
+      const sumKey = this.tableColumns.reduce((prve, curr) => {
+        if (curr.summarizing) {
+          prve.push(curr.prop)
+        }
+        return prve
+      }, [])
+      const sumObj = {}
+      sumKey.forEach(key => {
+        sumObj[key] = 0
+        this.tableData.forEach(item => {
+          if (item[key]) {
+            // 利用mathjs 来计算精度问题
+            // sumObj[key] = NP.plus(sumObj[key], Number(item[key]))
+            sumObj[key] = add(sumObj[key], Number(item[key]))
+            // sumObj[key] += Number(item[key])
+          }
+        })
+      })
+      const total_ = Object.assign(_.cloneDeep(this.total || {}))
+      const tkeys = Object.keys(total_)
+      columns.forEach((column, index) => {
+        const { property } = column
+        if (index === 0) {
+          sums[index] = '合计'
+        } else if (tkeys.length) {
+          if (tkeys.includes(property)) {
+            sums[index] = total_[property]
+          } else {
+            sums[index] = ''
+          }
+        } else if (sumKey.length) {
+          if (sumKey.includes(property)) {
+            sums[index] = sumObj[property]
+          } else {
+            sums[index] = ''
+          }
+        }
+      })
+      return [sums]
+    },
+    selectAll(selection) {
+      this.tableData.forEach(item => {
+        item.isSelected = !!selection.length
+      })
+      if (!selection.length) {
+        // 清空时 去掉当前行
+        this.emitSetCurrentRow(null, false)
+      }
+    },
+    setToggleRowSelection(row, flag) {
+      if (!row) return
+      this.$refs.plTable &&
+        this.$refs.plTable.toggleRowSelection([
+          // 设置当前行选中
+          {
+            row,
+            selected: !!flag
+          }
+        ])
+      row.isSelected = !!flag
+    },
+    selectCheckBox(selection, row) {
+      row.isSelected = !row.isSelected
+      this.$refs.plTable.setCurrentRow(row)
+      this.rowClick(row)
+    },
+    selectable(row, index) {
+      return true
+    },
+    /* 操作列按钮点击
+     * item 按钮信息
+     * index 当前行所在行数
+     * row 当前行
+     */
+    async itemClickHandle(item, row, index) {
+      // this.setToggleRowSelection(row, true)
+      const { click, confirm } = item
+      if (confirm) {
+        // 点击后弹出提示语
+        const confirmObj = {}
+        if (typeof confirm === 'string') {
+          confirmObj.confirmText = confirm
+          confirmObj.confirmButtonText = '确定'
+          confirmObj.cancelButtonText = '取消'
+        } else {
+          const { confirmButtonText, cancelButtonText, confirmText } = confirm
+          confirmObj.confirmText = confirmText
+          confirmObj.confirmButtonText = confirmButtonText || '确定'
+          confirmObj.cancelButtonText = cancelButtonText || '取消'
+        }
+        const r = await this.$confirm(confirmObj.confirmText, '提示', {
+          confirmButtonText: confirmObj.confirmButtonText,
+          cancelButtonText: confirmObj.cancelButtonText,
+          type: 'warning'
+        })
+        if (r !== 'confirm') {
+          return
+        }
+      }
+      const type = typeof click
+      const bindEntity = this.getBindEntity()
+      if (type === 'string' && click.startsWith('$')) {
+        const item_ = Object.assign({}, item) // 拷贝一份item
+        item_.click = item_.click.substr(1)
+        this.$emit('handleClick', row, item_, bindEntity)
+      } else if (type === 'function') {
+        click(row, item, bindEntity)
+      }
+    },
+    tableColumnSet() {
+      const config = _.cloneDeep(this.tableConfig)
+      if (config && config.columnsConfig && config.columnsConfig.length) {
+        this.tableDataColums = [...config.columnsConfig]
+      } else {
+        this.tableDataColums = [{}]
+      }
+      this.tableDataColums.forEach((item, index) => {
+        if (item.childs) {
+          this.tableDataColums.splice(index, 1, ...item.childs)
+        }
+      })
+      this.dialogVisibleTbaleColums = true
+    },
+    getPageInfo(info = this.elInfo) {
+      const data = {
+        controlName: info.position
+      }
+      return this.$listeners.webChartConfigQuery(data)
+    },
+    async submitTableColums(data, flage) {
+      const res = await this.getPageInfo()
+      let paramsData = {}
+      const resData = res.data
+      if (!resData || (Array.isArray(resData) && !resData.length)) {
+        paramsData.json_config = JSON.stringify(this.config || {})
+        paramsData.json_data = JSON.stringify(this.data || [])
+        paramsData.is_mock = 1
+        paramsData.query_sql = ''
+      } else if (Array.isArray(resData) && resData.length) {
+        paramsData = resData[0]
+      }
+      const { query_sql, json_config, json_data, is_mock } = paramsData
+      const json_config_ = JSON.parse(json_config)
+      json_config_.columnsConfig = data
+      const dataw = {
+        controlName: this.elInfo.position,
+        config: json_config_,
+        data: JSON.parse(json_data),
+        querySql: query_sql,
+        mockData: is_mock ? 1 : 0
+      }
+      this.$listeners.webChartConfigSave(dataw).then(res => {
+        if (flage !== 'columnStyleSet') {
+          this.dialogVisibleTbaleColums = false
+        }
+        this.tableConfig.columnsConfig = data
+      })
+    },
+    async exportExcel(flage) {
+      const data = this.tableData
+      const columnsProp_ = []
+      this.tableColumns.forEach(item => {
+        if (item.childs) {
+          columnsProp_.push(...item.childs)
+        } else {
+          columnsProp_.push(item)
+        }
+      })
+      const tHeader = []
+      // 筛选出具有实际意义的列(包含prop)
+      columnsProp_
+        .filter(item => item.prop)
+        .forEach(item => {
+          const str = item.label
+            ? `${item.label}=${item.prop}`
+            : `${item.prop}=${item.prop}`
+          tHeader.push(str)
+        })
+      const exportExcelName = this.tableConfig.exportExcelName || '表'
+      if (flage === 2) {
+        const bindEntity = this.getBindEntity()
+        const result = await this.getSourceData(bindEntity)
+        if (Array.isArray(result) && result.length) {
+          let exportExcelData = []
+          if (result[0].json_data) {
+            const json_data =
+              typeof result[0].json_data === 'string'
+                ? JSON.parse(result[0].json_data)
+                : result[0].json_data
+            exportExcelData = Array.isArray(json_data)
+              ? json_data
+              : json_data.table
+          } else {
+            exportExcelData = result
+          }
+          utilsExcel.exportToExcel(tHeader, exportExcelData, exportExcelName)
+        } else {
+          this.$message.warning('暂无数据~')
+        }
+      } else {
+        utilsExcel.exportToExcel(tHeader, data, exportExcelName)
+      }
+    },
+    rowCellBoolean(value) {
+      if (Number(value)) {
+        return 'el-icon-check'
+      } else {
+        return 'el-icon-close'
+      }
+    },
+    setRowStyle({ row }) {
+      const { usable, bUsable, bDisabled, bill_status } = row
+      const valuelist = [false, 0, '0']
+      if (
+        Number(bill_status) === 5 ||
+        valuelist.includes(usable) ||
+        valuelist.includes(bUsable) ||
+        valuelist.includes(bDisabled)
+      ) {
+        return {
+          'text-decoration': 'line-through',
+          color: '#afafaf'
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.iconTool {
+  position: absolute;
+  right: 0;
+  z-index: 100;
+}
+._hs_table >>> .plTableBox .myPagination {
+  padding-top: 0;
+}
+</style>
+<style>
+/* ._hs_table .el-table::before,
+._hs_table .el-table::after {
+  height: 0 !important;
+}
+._hs_table body .el-table th.gutter {
+  display: table-cell !important;
+} */
+/*滑块轨道*/
+._hs_table .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+/*轨道*/
+._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}
+._hs_table .el-table::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}
+._hs_table .el-table::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  opacity: 0.7;
+}
+._hs_table ::-webkit-scrollbar {
+  width: 0px;
+  background-color: transparent;
+}
+.elLink {
+  margin: 0 3px;
+  font-size: 12px;
+}
+.toolButtonGroupBox {
+  display: flex;
+  justify-content: flex-end;
+}
+.titleToolbox {
+  display: flex;
+  justify-content: space-between;
+}
+.eldropdownitem {
+  width: 100px;
+  padding: 10px;
+  text-align: center;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+  margin-left: 10px;
+}
+.el-table__body tbody td {
+  padding: 0 !important;
+}
+
+.el-table td,
+.el-table th {
+  padding: 0 !important;
+}
+.el-table .cell {
+  padding-right: 0;
+}
+td {
+  height: 35px !important;
+}
+</style>
+

src/packages/hs-table/src/child.vue

@@ -21,134 +21,263 @@
         @clickLabel='clickToolLabel'
       ></tool-column>
     </span>
-    <ux-grid
-      :data-changes-scroll-top='false'
-      :big-data-checkbox="true"
-      ref="plTable"
-      :data="tableData"
-      :height="tableHeight"
-      use-virtual
-      showHeaderOverflow="title"
-      border
-      :show-summary='showSummary'
-      :summary-method="getSummaries"
-      @select-all='selectAll'
-      @select='selectCheckBox'
-      @sort-change='sortChange'
-      @row-dblclick='rowDblclick'
-      @row-click="rowClick"
-      @selection-change='selectionChange'
-      :pagination-show="!!paging"
-      :total="pagingConfig.total"
-      :page-size="pagingConfig.per_page"
-      :current-page="pagingConfig.page"
-      :page-sizes='pageSizes'
-      @handlePageSize='handlePageSize'
-      :row-height="rowHeight"
-      :row-style='setRowStyle'
-    >
+    <template v-if='!tableConfig.expandChild'>
+      <u-table
+        :data-changes-scroll-top='false'
+        :big-data-checkbox="true"
+        ref="plTable"
+        :data="tableData"
+        :height="tableHeight"
+        use-virtual
+        showHeaderOverflow="title"
+        border
+        :show-summary='showSummary'
+        :summary-method="getSummaries"
+        @select-all='selectAll'
+        @select='selectCheckBox'
+        @sort-change='sortChange'
+        @row-dblclick='rowDblclick'
+        @row-click="rowClick"
+        @selection-change='selectionChange'
+        :pagination-show="!!paging"
+        :total="pagingConfig.total"
+        :page-size="pagingConfig.per_page"
+        :current-page="pagingConfig.page"
+        :page-sizes='pageSizes'
+        @handlePageSize='handlePageSize'
+        :row-height="rowHeight"
+        :row-style='setRowStyle'
+      >
 
-      <template v-for='(column,index) in tableColumns'>
-        <template v-if="!column.childs">
-          <ux-table-column
-            v-if='column.showType==="expandChild"'
-            :key="index"
-            type="expand"
-            width='50px'
-            title='展开'
-          >
-            <template v-slot:content="{ row }">
-              <rowTable :rowTable='row._childTable'></rowTable>
-            </template>
-          </ux-table-column>
-          <ux-table-column
-            v-else-if="column.showType==='index'"
-            :key="index"
-            type="index"
-            width="55"
-          />
-          <ux-table-column
-            v-else-if="column.showType==='selection'"
-            :key="index"
-            type="checkbox"
-            width="55"
-            :selectable="selectable"
-          />
-          <ux-table-column
-            v-else-if='column.showType==="handleColumn"'
-            :key="index"
-            fixed="right"
-            label="操作"
-            :width='tableConfig.handleWidth'
-          >
-            <template slot-scope="scope">
-              <handle-column
-                :data='tableHandleColumns'
-                :row='scope.row'
-                :showItem='showItem'
-                :disabledItem='disabledItem'
-                @itemClickHandle='itemClickHandle'
-              />
-            </template>
-          </ux-table-column>
-          <ux-table-column
-            v-else
-            :key="index"
-            :resizable="column.resizable"
-            :show-overflow-tooltip="column.showOverflow"
-            :field="column.prop"
-            :title="column.label"
-            :fixed="column.fixed"
-            :min-width="column.width||80"
-            :sortable="column.isSort"
-          >
-            <template slot-scope="scope">
-              <i
-                v-if="column.type==='checkBox'"
-                :class="rowCellBoolean(scope.row[column.prop])"
-              ></i>
-              <childItem
-                v-else
-                v-bind="$attrs"
-                v-on="$listeners"
-                :editable='editable'
-                :item='column'
-                :prop="column.prop"
-                :formParms='scope.row'
-              >
-              </childItem>
-            </template>
-          </ux-table-column>
+        <template v-for='(column,index) in tableColumns'>
+          <template v-if="!column.childs">
+            <u-table-column
+              v-if='tableConfig.expandChild'
+              :key="index"
+              type="expand"
+            >
+              <template slot-scope="props">
+                <rowTable :rowTable='props.row._childTable'></rowTable>
+              </template>
+            </u-table-column>
+            <u-table-column
+              v-else-if="column.showType==='index'"
+              :key="index"
+              type="index"
+              width="55"
+            />
+            <u-table-column
+              v-else-if="column.showType==='selection'"
+              :key="index"
+              type="selection"
+              width="55"
+              :selectable="selectable"
+            />
+            <u-table-column
+              v-else-if='column.showType==="handleColumn"'
+              :key="index"
+              fixed="right"
+              label="操作"
+              :width='tableConfig.handleWidth'
+            >
+              <template slot-scope="scope">
+                <handle-column
+                  :data='tableHandleColumns'
+                  :row='scope.row'
+                  :showItem='showItem'
+                  :disabledItem='disabledItem'
+                  @itemClickHandle='itemClickHandle'
+                />
+              </template>
+            </u-table-column>
+            <u-table-column
+              v-else
+              :key="index"
+              :resizable="column.resizable"
+              :show-overflow-tooltip="column.showOverflow"
+              :prop="column.prop"
+              :label="column.label"
+              :fixed="column.fixed"
+              :min-width="column.width||80"
+              :sortable="column.isSort?'custom':false"
+            >
+              <template slot-scope="scope">
+                <i
+                  v-if="column.type==='checkBox'"
+                  :class="rowCellBoolean(scope.row[column.prop])"
+                ></i>
+                <childItem
+                  v-else
+                  :editable='editable'
+                  v-bind="$attrs"
+                  v-on="$listeners"
+                  :item='column'
+                  :prop="column.prop"
+                  :formParms='scope.row'
+                >
+                </childItem>
+              </template>
+            </u-table-column>
+          </template>
+          <template v-else-if='column.childs'>
+            <u-table-column
+              :label="column.label"
+              :key="index"
+            >
+              <template v-for="item in column.childs">
+                <u-table-column
+                  :prop="item.prop"
+                  :label="item.label"
+                  :key="item.label"
+                  :min-width="column.width||80"
+                >
+                  <template slot-scope="scope">
+                    <childItem
+                      :item='item'
+                      :formParms='scope.row'
+                      v-bind="$attrs"
+                      v-on="$listeners"
+                      :editable='editable'
+                    >
+                    </childItem>
+                  </template>
+                </u-table-column>
+              </template>
+            </u-table-column>
+          </template>
         </template>
-        <template v-else-if='column.childs'>
-          <ux-table-column
-            :label="column.label"
-            :key="index"
-          >
-            <template v-for="item in column.childs">
-              <ux-table-column
-                :field="item.prop"
-                :title="item.label"
-                :key="item.label"
-                :min-width="column.width||80"
-              >
-                <template slot-scope="scope">
-                  <childItem
-                    :item='item'
-                    :formParms='scope.row'
-                    :editable='editable'
-                    v-bind="$attrs"
-                    v-on="$listeners"
-                  >
-                  </childItem>
-                </template>
-              </ux-table-column>
-            </template>
-          </ux-table-column>
+      </u-table>
+    </template>
+    <template v-else>
+      <ux-grid
+        :data-changes-scroll-top='false'
+        :big-data-checkbox="true"
+        ref="plTable"
+        :data="tableData"
+        :height="tableHeight"
+        use-virtual
+        showHeaderOverflow="title"
+        border
+        :show-summary='showSummary'
+        :summary-method="getSummaries"
+        @select-all='selectAll'
+        @select='selectCheckBox'
+        @sort-change='sortChange'
+        @row-dblclick='rowDblclick'
+        @row-click="rowClick"
+        @selection-change='selectionChange'
+        :pagination-show="!!paging"
+        :total="pagingConfig.total"
+        :page-size="pagingConfig.per_page"
+        :current-page="pagingConfig.page"
+        :page-sizes='pageSizes'
+        @handlePageSize='handlePageSize'
+        :row-height="rowHeight"
+        :row-style='setRowStyle'
+      >
+
+        <template v-for='(column,index) in tableColumns'>
+          <template v-if="!column.childs">
+            <ux-table-column
+              v-if='column.showType==="expandChild"'
+              :key="index"
+              type="expand"
+              width='50px'
+              title='展开'
+            >
+              <template v-slot:content="{ row }">
+                <rowTable :rowTable='row._childTable'></rowTable>
+              </template>
+            </ux-table-column>
+            <ux-table-column
+              v-else-if="column.showType==='index'"
+              :key="index"
+              type="index"
+              width="55"
+            />
+            <ux-table-column
+              v-else-if="column.showType==='selection'"
+              :key="index"
+              type="checkbox"
+              width="55"
+              :selectable="selectable"
+            />
+            <ux-table-column
+              v-else-if='column.showType==="handleColumn"'
+              :key="index"
+              fixed="right"
+              label="操作"
+              :width='tableConfig.handleWidth'
+            >
+              <template slot-scope="scope">
+                <handle-column
+                  :data='tableHandleColumns'
+                  :row='scope.row'
+                  :showItem='showItem'
+                  :disabledItem='disabledItem'
+                  @itemClickHandle='itemClickHandle'
+                />
+              </template>
+            </ux-table-column>
+            <ux-table-column
+              v-else
+              :key="index"
+              :resizable="column.resizable"
+              :show-overflow-tooltip="column.showOverflow"
+              :field="column.prop"
+              :title="column.label"
+              :fixed="column.fixed"
+              :min-width="column.width||80"
+              :sortable="column.isSort"
+            >
+              <template slot-scope="scope">
+                <i
+                  v-if="column.type==='checkBox'"
+                  :class="rowCellBoolean(scope.row[column.prop])"
+                ></i>
+                <childItem
+                  v-else
+                  v-bind="$attrs"
+                  v-on="$listeners"
+                  :editable='editable'
+                  :item='column'
+                  :prop="column.prop"
+                  :formParms='scope.row'
+                >
+                </childItem>
+              </template>
+            </ux-table-column>
+          </template>
+          <template v-else-if='column.childs'>
+            <ux-table-column
+              :label="column.label"
+              :key="index"
+            >
+              <template v-for="item in column.childs">
+                <ux-table-column
+                  :field="item.prop"
+                  :title="item.label"
+                  :key="item.label"
+                  :min-width="column.width||80"
+                >
+                  <template slot-scope="scope">
+                    <childItem
+                      :item='item'
+                      :formParms='scope.row'
+                      :editable='editable'
+                      v-bind="$attrs"
+                      v-on="$listeners"
+                    >
+                    </childItem>
+                  </template>
+                </ux-table-column>
+              </template>
+            </ux-table-column>
+          </template>
         </template>
-      </template>
 
-    </ux-grid>
+      </ux-grid>
+    </template>
     <tbaleColumsSet
       v-model="dialogVisibleTbaleColums"
       :tableDataColums='tableDataColums'