【fix bug】66425【前端】升级vxe-table组件到3.6.10版本，并同步适配当前框架中所有使用到vxe-table组件的示例

jero-web/package.json

@@ -45,9 +45,9 @@
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
     "vuex": "^3.1.0",
-    "vxe-table": "2.9.13",
+    "vxe-table": "^3.6.10",
-    "vxe-table-plugin-antd": "1.8.10",
+    "vxe-table-plugin-antd": "^1.11.2",
-    "xe-utils": "2.4.8"
+    "xe-utils": "^3.5.7"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",

jero-web/src/components/jero/JVxeTable/components/JVxeTable.js

@@ -12,7 +12,7 @@ import JVxeSubPopover from './JVxeSubPopover'
 import JVxeDetailsModal from './JVxeDetailsModal'
 import JVxePagination from './JVxePagination'
 import { cloneObject, getVmParentByName, pushIfNotExist, randomString, simpleDebounce } from '@/utils/util'
-import { UtilTools } from 'vxe-table/packages/tools/src/utils'
+import { UtilTools } from 'vxe-table/packages/tools/utils'
 import { getNoAuthCols } from '@/utils/authFilter'
 
 export default {
@@ -351,7 +351,7 @@ export default {
           this.statistics.average = []
 
           // 处理成vxe可识别的columns
-          columns.forEach(column => {
+          columns.forEach((column, columnIndex) => {
             if (this.excludeCode.indexOf(column.key) >= 0) {
               return false
             }
@@ -389,7 +389,7 @@ export default {
               col[renderName] = renderOptions
               // 处理字典
               if (col.dictCode) {
-                this._loadDictConcatToOptions(col)
+                this._loadDictConcatToOptions(col, columnIndex)
               }
               // 处理校验
               if (col.validateRules) {
@@ -631,7 +631,7 @@ export default {
       }
 
       // 显示详细信息
-      if (column.own.showDetails) {
+      if (column.params && column.params.showDetails) {
         // 两个如果同时存在的话会出现死循环
         if ($refs.subPopover) {
           $refs.subPopover.close()
@@ -669,13 +669,15 @@ export default {
     // 单元格编辑状态下被关闭时会触发该事件
     handleEditClosed ({ column }) {
       // 执行增强
-      getEnhancedMixins(column.own.$type, 'aopEvents').editClosed.apply(this, arguments)
+      getEnhancedMixins(column.params.type, 'aopEvents').editClosed.apply(this, arguments)
     },
 
     // 单元格被激活编辑时会触发该事件
     handleEditActived ({ column }) {
       // 执行增强
-      getEnhancedMixins(column.own.$type, 'aopEvents').editActived.apply(this, arguments)
+      if (column.params && column.params.type) {
+        getEnhancedMixins(column.params.type, 'aopEvents').editActived.apply(this, arguments)
+      }
     },
 
     /** 表尾数据处理方法，用于显示统计信息 */
@@ -794,10 +796,10 @@ export default {
               this.$set(row, colKey, newValue)
               // 触发 valueChange 事件
               this.trigger('valueChange', {
-                type: column.own.$type,
+                type: column.params.type,
                 value: newValue,
                 oldValue: oldValue,
-                col: column.own,
+                col: column.params,
                 column: column,
                 isSetValues: true
               })
@@ -1067,7 +1069,7 @@ export default {
     },
 
     /** 加载数据字典并合并到 options */
-    _loadDictConcatToOptions (column) {
+    _loadDictConcatToOptions (column, columnIndex) {
       initDictOptions(column.dictCode).then((res) => {
         if (res.success) {
           const newOptions = (column.options || [])// .concat(res.result)
@@ -1077,6 +1079,9 @@ export default {
             newOptions.push(item)
           })
           this.$set(column, 'options', newOptions)
+          const newParams = Object.assign(column.params, { options: newOptions })
+          this.$set(column, 'params', newParams)
+          this.$set(this._innerColumns, columnIndex, column)
         } else {
           console.group(`JVxeTable 查询字典(${column.dictCode})发生异常`)
           console.warn(res.message)
@@ -1182,7 +1187,7 @@ export default {
       XEUtils.remove(insertList, row => rows.indexOf(row) > -1)
       xTable.handleTableData()
       xTable.updateFooter()
-      xTable.updateCache()
+      xTable.updateCache && xTable.updateCache()
       xTable.checkSelectionStatus()
       if (scrollYLoad) {
         xTable.updateScrollYSpace()
@@ -1219,7 +1224,9 @@ export default {
           data[this.dragSortKey] = (idx + 1)
         })
       }
-      await xTable.updateCache(true)
+      if (xTable.updateCache) {
+        await xTable.updateCache(true)
+      }
       return await xTable.updateData()
     },
 
@@ -1255,7 +1262,7 @@ export default {
       const { xTable } = this.$refs.vxe.$refs
       // 添加默认值
       xTable.tableFullColumn.forEach(column => {
-        const col = column.own
+        const col = column.params || {}
         if (col.key && (record[col.key] == null || record[col.key] === '')) {
           // 设置默认值
           const createValue = getEnhancedMixins(col.$type || col.type, 'createValue')
@@ -1436,7 +1443,7 @@ function handlerConvertToValidator (event) {
     rule.handler(event, (flag, msg) => {
       let message = rule.message
       if (typeof msg === 'string') {
-        message = replaceProps(column.own, msg)
+        message = replaceProps(column.params, msg)
       }
       if (flag == null) {
         resolve(message)
@@ -1455,7 +1462,7 @@ function uniqueValidator (event) {
   const tableData = this.getTableData()
   let findCount = 0
   for (const rowData of tableData) {
-    if (rowData[column.own.key] === cellValue) {
+    if (rowData[column.params.key] === cellValue) {
       if (++findCount >= 2) {
         return Promise.reject(new Error(rule.message))
       }

jero-web/src/components/jero/JVxeTable/components/cells/JVxeCheckboxCell.vue

@@ -50,7 +50,7 @@ export default {
       visible: true
     },
     getValue (value) {
-      const { own: col } = this.column
+      const { params: col } = this.column
       // 处理 customValue
       if (Array.isArray(col.customValue)) {
         const customValue = getCustomValue(col)
@@ -64,7 +64,7 @@ export default {
       }
     },
     setValue (value) {
-      const { own: col } = this.column
+      const { params: col } = this.column
       // 判断是否设定了customValue（自定义值）
       if (Array.isArray(col.customValue)) {
         const customValue = getCustomValue(col)
@@ -74,7 +74,7 @@ export default {
       }
     },
     createValue ({ column }) {
-      const { own: col } = column
+      const { params: col } = column
       if (Array.isArray(col.customValue)) {
         const customValue = getCustomValue(col)
         return col.defaultChecked ? customValue[0] : customValue[1]
@@ -93,11 +93,11 @@ function getCustomValue (col) {
 </script>
 
 <style lang="less">
-  // 关闭动画，防止滚动时动态赋值出现问题
+// 关闭动画，防止滚动时动态赋值出现问题
-  .j-vxe-checkbox.no-animation {
+.j-vxe-checkbox.no-animation {
-    .ant-checkbox-inner,
+  .ant-checkbox-inner,
-    .ant-checkbox-inner::after {
+  .ant-checkbox-inner::after {
-      transition: none !important;
+    transition: none !important;
-    }
   }
+}
 </style>

jero-web/src/components/jero/JVxeTable/components/cells/JVxeSelectCell.vue

@@ -8,8 +8,7 @@
     style="width: 100%;"
     @blur="handleBlur"
     @change="handleChange"
-    @search="handleSearchSelect"
+    @search="handleSearchSelect">
-  >
 
     <div v-if="loading" slot="notFoundContent">
       <a-icon type="loading" />
@@ -47,7 +46,7 @@ export default {
       }
       const { linkage } = this.renderOptions
       if (linkage) {
-        this.handleComputedSelectOptions(linkage)
+        return this.handleComputedSelectOptions(linkage)
       }
       return this.originColumn.options
     },
@@ -184,7 +183,7 @@ export default {
             })
           }
         } else {
-          options = this.column.own.options
+          options = (this.column.params || {}).options
         }
         return filterDictText(options, value)
       }
@@ -197,7 +196,7 @@ export default {
       }
     },
     setValue (value) {
-      const { column: { own: col }, params: { $table } } = this
+      const { column: { params: col }, params: { $table } } = this
       // 判断是否是多选
       if ((col.props || {}).mode === 'multiple') {
         $table.$set(col.props, 'maxTagCount', 1)

jero-web/src/components/jero/JVxeTable/components/cells/JVxeUploadCell.vue

@@ -45,12 +45,11 @@
       name="file"
       :data="{'isup': 1}"
       :multiple="false"
-      :action="originColumn.action"
+      :action="uploadAction"
       :headers="uploadHeaders"
       :showUploadList="false"
       v-bind="cellProps"
-      @change="handleChangeUpload"
+      @change="handleChangeUpload">
-    >
       <a-button icon="upload">{{ originColumn.btnText || '点击上传' }}</a-button>
     </a-upload>
   </div>
@@ -80,11 +79,15 @@ export default {
       }
       return headers
     },
-
     hasFile () {
-      return this.innerFile != null
+      return !!this.innerFile
+    },
+    uploadAction () {
+      if (this.originColumn.action) {
+        return this.originColumn.action
+      }
+      return window._CONFIG.domianURL + '/sys/common/upload'
     }
-
   },
   watch: {
     innerValue: {
@@ -116,7 +119,7 @@ export default {
       if (file.status === 'done') {
         if (typeof file.response.success === 'boolean') {
           if (file.response.success) {
-            value.path = file.response[col.responseName]
+            value.path = col.responseName ? file.response[col.responseName] : file.response.result.url
           } else {
             value.status = 'error'
             value.message = file.response.message || '未知错误'
@@ -129,6 +132,10 @@ export default {
         value.message = file.response.message || '未知错误'
       }
       this.innerFile = value
+      // 上传完成后触发通用change事件，将值抛出去
+      if (file.status === 'done') {
+        this.handleChangeCommon(this.innerFile)
+      }
     },
 
     // handleClickPreviewFile(id) {

jero-web/src/components/jero/JVxeTable/install.js

@@ -43,15 +43,15 @@ installAllCell(VXETable)
 // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
 VXETable.interceptor.add('event.clearActived', function (params, event, target) {
   // 获取组件增强
-  const col = params.column.own
+  const col = params.column.params || {}
   const interceptor = getEnhancedMixins(col.$type, 'interceptor')
   // 执行增强
   const flag = interceptor['event.clearActived'].apply(this, arguments)
   if (flag === false) {
     return false
   }
-
+  // 此处判断一下event是否存在，防止后续内容报错
-  const path = getEventPath(event)
+  const path = event ? getEventPath(event) : []
   for (const p of path) {
     let className = p.className || ''
     className = typeof className === 'string' ? className : className.toString()

jero-web/src/components/jero/JVxeTable/mixins/JVxeCellMixins.js

@@ -28,10 +28,10 @@ export default {
       return this.renderOptions.caseId
     },
     originColumn () {
-      return this.column.own
+      return this.column.params || {}
     },
     $type () {
-      return this.originColumn.$type
+      return this.originColumn.type
     },
     rows () {
       return this.params.data
@@ -272,7 +272,7 @@ export default {
      * @returns 返回新值
      */
     createValue ({ row, column, $table, renderOptions, params }) {
-      return column.own.defaultValue
+      return (column.params || {}).defaultValue
     }
   }
 }
@@ -307,7 +307,7 @@ export function dispatchEvent ({ cell, $event }, className, handler) {
     return
   }
   window.setTimeout(() => {
-    const element = cell.getElementsByClassName(className)
+    const element = cell ? cell.getElementsByClassName(className) : null
     if (element && element.length > 0) {
       if (typeof handler === 'function') {
         handler(element[0])

jero-web/src/components/jero/JVxeTable/mixins/vxe.web.socket.mixins.js

@@ -49,7 +49,7 @@ const vs = {
   initialWebSocket () {
     if (this.ws === null) {
       const userId = store.getters.userInfo.id
-      const domain = window._CONFIG.domianURL.replace('https://', 'wss://').replace('http://', 'ws://')
+      const domain = window._CONFIG.domianWebSocketURL.replace('https://', 'wss://').replace('http://', 'ws://')
       const url = `${domain}/vxeSocket/${userId}/${this.pageId}`
 
       this.ws = new WebSocket(url)

jero-web/src/components/jero/JVxeTable/utils/cellUtils.js

@@ -33,12 +33,14 @@ export function installEditRender (VXETable, type, comp, spanComp) {
   } else {
     spanComp = AllCells[JVXETypes.normal]
   }
+  // 如果是常显的cell，显示模板和编辑模板都用编辑模板
+  const cellRender = enhanced.switches.visible ? createRender(comp, enhanced, JVXERenderType.editer) : createRender(spanComp, enhanced, JVXERenderType.spaner)
   // 添加渲染
   VXETable.renderer.add(JVXETypes._prefix + type, {
     // 可编辑模板
     renderEdit: createRender(comp, enhanced, JVXERenderType.editer),
     // 显示模板
-    renderCell: createRender(spanComp, enhanced, JVXERenderType.spaner),
+    renderCell: cellRender,
     // 增强注册
     ...enhanced.installOptions
   })
@@ -56,7 +58,7 @@ export function installCellRender (VXETable, type, comp = AllCells[JVXETypes.nor
   })
 }
 
-function createRender (comp, enhanced, renderType) {
+export function createRender (comp, enhanced, renderType) {
   return function (h, renderOptions, params) {
     return [h(comp, {
       props: {

jero-web/src/views/demo/JVxeDemo/JVxeDemo1.vue

@@ -5,14 +5,13 @@
     :row-number="true"
     :row-selection="true"
     :drag-sort="true"
-    keep-source
+    :keep-source="true"
     :height="580"
     :loading="loading"
     :dataSource="dataSource"
     :columns="columns"
     style="margin-top: 8px;"
-    @valueChange="handleValueChange"
+    @valueChange="handleValueChange">
-  >
 
     <template v-slot:toolbarSuffix>
       <a-button @click="handleTableCheck">表单验证</a-button>
@@ -24,9 +23,13 @@
       </a-tooltip>
     </template>
 
+    <template v-slot:checkbox="props">
+      <a-checkbox />
+    </template>
+
     <template v-slot:action="props">
       <a @click="handleCK(props)">查看</a>
-      <a-divider type="vertical"/>
+      <a-divider type="vertical" />
       <a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
         <a>删除</a>
       </a-popconfirm>
@@ -50,6 +53,14 @@ export default {
           title: '不可编辑',
           key: 'normal',
           type: JVXETypes.normal,
+          params: {
+            key: 'normal',
+            type: JVXETypes.normal
+          },
+          props: {
+            key: 'normal',
+            type: JVXETypes.normal
+          },
           width: '180px',
           fixed: 'left',
           defaultValue: 'normal-new'
@@ -58,6 +69,10 @@ export default {
           title: '单行文本',
           key: 'input',
           type: JVXETypes.input,
+          params: {
+            key: 'input',
+            type: JVXETypes.input
+          },
           width: '180px',
           defaultValue: '',
           placeholder: '请输入${title}', // 这是vxe-table的写法
@@ -97,14 +112,22 @@ export default {
           title: '多行文本',
           key: 'textarea',
           type: JVXETypes.textarea,
+          params: {
+            key: 'textarea',
+            type: JVXETypes.textarea
+          },
           width: '200px'
         },
         {
           title: '数字',
           key: 'number',
           type: JVXETypes.inputNumber,
+          params: {
+            key: 'number',
+            type: JVXETypes.inputNumber,
+            defaultValue: 32
+          },
           width: '80px',
-          defaultValue: 32,
           // 【统计列】sum = 求和、average = 平均值
           statistics: ['sum', 'average']
         },
@@ -112,38 +135,49 @@ export default {
           title: '下拉框',
           key: 'select',
           type: JVXETypes.select,
+          params: {
+            key: 'select',
+            allowInput: true,
+            type: JVXETypes.select,
+            options: [
+              { title: 'String', value: 'string' },
+              { title: 'Integer', value: 'int' },
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ]
+          },
           width: '180px',
-          // 下拉选项
-          options: [
-            { title: 'String', value: 'string' },
-            { title: 'Integer', value: 'int' },
-            { title: 'Double', value: 'double' },
-            { title: 'Boolean', value: 'boolean' }
-          ],
-          allowInput: true,
           placeholder: '请选择'
         },
         {
           title: '下拉框_字典',
           key: 'select_dict',
           type: JVXETypes.select,
-          width: '180px',
+          params: {
-          options: [],
+            key: 'select_dict',
+            type: JVXETypes.select,
+            options: []
+          },
           dictCode: 'sex',
+          width: '180px',
           placeholder: '请选择'
         },
         {
           title: '下拉框_多选',
           key: 'select_multiple',
           type: JVXETypes.selectMultiple,
+          params: {
+            key: 'select_multiple',
+            defaultValue: ['int', 'boolean'], // 多个默认项
+            type: JVXETypes.selectMultiple,
+            options: [
+              { title: 'String', value: 'string' },
+              { title: 'Integer', value: 'int' },
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ]
+          },
           width: '205px',
-          options: [
-            { title: 'String', value: 'string' },
-            { title: 'Integer', value: 'int' },
-            { title: 'Double', value: 'double' },
-            { title: 'Boolean', value: 'boolean' }
-          ],
-          defaultValue: ['int', 'boolean'], // 多个默认项
           // defaultValue: 'string,double,int', // 也可使用这种方式
           placeholder: '多选'
         },
@@ -152,26 +186,40 @@ export default {
           title: '下拉框_搜索',
           key: 'select_search',
           type: JVXETypes.selectSearch,
-          width: '180px',
+          params: {
-          options: [
+            key: 'select_search',
-            { title: 'String', value: 'string' },
+            type: JVXETypes.selectSearch,
-            { title: 'Integer', value: 'int' },
+            options: [
-            { title: 'Double', value: 'double' },
+              { title: 'String', value: 'string' },
-            { title: 'Boolean', value: 'boolean' }
+              { title: 'Integer', value: 'int' },
-          ]
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ]
+          },
+          width: '180px'
         },
         {
           title: '日期时间',
           key: 'datetime',
           type: JVXETypes.datetime,
+          params: {
+            key: 'datetime',
+            type: JVXETypes.datetime,
+            defaultValue: '2019-4-30 14:52:22'
+          },
           width: '200px',
-          defaultValue: '2019-4-30 14:52:22',
           placeholder: '请选择'
         },
         {
           title: '复选框',
           key: 'checkbox',
           type: JVXETypes.checkbox,
+          params: {
+            key: 'checkbox',
+            type: JVXETypes.checkbox,
+            customValue: ['Y', 'N'], // true ,false
+            defaultChecked: false
+          },
           width: '100px',
           customValue: ['Y', 'N'], // true ,false
           defaultChecked: false
@@ -180,6 +228,10 @@ export default {
           title: '操作',
           key: 'action',
           type: JVXETypes.slot,
+          params: {
+            key: 'action',
+            type: JVXETypes.slot
+          },
           fixed: 'right',
           minWidth: '100px',
           align: 'center',

jero-web/src/views/demo/JVxeDemo/JVxeDemo2.vue

@@ -11,8 +11,7 @@
     :columns="columns"
     :pagination="pagination"
     style="margin-top: 8px;"
-    @pageChange="handlePageChange"
+    @pageChange="handlePageChange">
-  >
 
     <template v-slot:toolbarSuffix>
       <a-button @click="handleTableGet">获取值</a-button>
@@ -38,7 +37,11 @@ export default {
           type: JVXETypes.selectDictSearch,
           width: '200px',
           // 【字典表配置信息】：数据库表名,显示字段名,存储字段名
-          dict: 'sys_user,realname,username'
+          dict: 'sys_user,realname,username',
+          params: {
+            key: 'select_dict_search',
+            type: JVXETypes.selectDictSearch
+          }
         },
         {
           title: 'JPopup',
@@ -48,7 +51,15 @@ export default {
           popupCode: 'demo',
           field: 'name,sex,age',
           orgFields: 'name,sex,age',
-          destFields: 'popup,popup_sex,popup_age'
+          destFields: 'popup,popup_sex,popup_age',
+          params: {
+            key: 'popup',
+            type: JVXETypes.popup,
+            popupCode: 'demo',
+            field: 'name,sex,age',
+            orgFields: 'name,sex,age',
+            destFields: 'popup,popup_sex,popup_age'
+          }
         },
         {
           title: 'JP-性别',
@@ -56,19 +67,31 @@ export default {
           type: JVXETypes.select,
           dictCode: 'sex',
           disabled: true,
-          width: '100px'
+          width: '100px',
+          params: {
+            key: 'popup_sex',
+            type: JVXETypes.select
+          }
         },
         {
           title: 'JP-年龄',
           key: 'popup_age',
           type: JVXETypes.normal,
-          width: '80px'
+          width: '80px',
+          params: {
+            key: 'popup_age',
+            type: JVXETypes.normal
+          }
         },
         {
           title: '进度条',
           key: 'progress',
           type: JVXETypes.progress,
-          minWidth: '120px'
+          minWidth: '120px',
+          params: {
+            key: 'progress',
+            type: JVXETypes.progress
+          }
         },
         {
           title: '单选',
@@ -80,7 +103,15 @@ export default {
             { text: '女', value: '2' }
           ],
           // 允许清除选择（再点一次取消选择）
-          allowClear: true
+          allowClear: true,
+          params: {
+            key: 'radio',
+            type: JVXETypes.radio,
+            options: [
+              { text: '男', value: '1' },
+              { text: '女', value: '2' }
+            ]
+          }
         },
         {
           title: '上传',
@@ -90,21 +121,36 @@ export default {
           btnText: '点击上传',
           token: true,
           responseName: 'message',
-          action: window._CONFIG.domianURL + '/sys/common/upload'
+          action: window._CONFIG.domianURL + '/sys/common/upload',
+          params: {
+            key: 'upload',
+            type: JVXETypes.upload,
+            token: true
+          }
         },
         {
           title: '图片上传',
           key: 'image',
           type: JVXETypes.image,
           width: '180px',
-          token: true
+          token: true,
+          params: {
+            key: 'image',
+            type: JVXETypes.image,
+            token: true
+          }
         },
         {
           title: '文件上传',
           key: 'file',
           type: JVXETypes.file,
           width: '180px',
-          token: true
+          token: true,
+          params: {
+            key: 'file',
+            type: JVXETypes.file,
+            token: true
+          }
         }
       ],
       dataSource: [],

jero-web/src/views/demo/JVxeDemo/JVxeDemo3.vue

@@ -8,8 +8,7 @@
     :height="484"
     :dataSource="dataSource"
     :columns="columns"
-    :linkage-config="linkageConfig"
+    :linkage-config="linkageConfig" />
-  />
 </template>
 
 <script>
@@ -30,9 +29,14 @@ export default {
           title: '性别',
           key: 'sex',
           type: JVXETypes.select,
-          dictCode: 'sex',
           width: '180px',
-          placeholder: '请选择${title}'
+          placeholder: '请选择${title}',
+          params: {
+            key: 'sex',
+            type: JVXETypes.select,
+            options: [],
+            dictCode: 'sex'
+          }
         },
         {
           title: '省/直辖市/自治区',
@@ -41,7 +45,13 @@ export default {
           width: '180px',
           placeholder: '请选择${title}',
           // 联动字段（即下一级的字段）
-          linkageKey: 's2'
+          linkageKey: 's2',
+          params: {
+            key: 's1',
+            type: JVXETypes.select,
+            // 联动字段（即下一级的字段）
+            linkageKey: 's2'
+          }
         },
         {
           title: '市',
@@ -50,7 +60,13 @@ export default {
           width: '180px',
           placeholder: '请选择${title}',
           // 联动字段（即下一级的字段）
-          linkageKey: 's3'
+          linkageKey: 's3',
+          params: {
+            key: 's2',
+            type: JVXETypes.select,
+            // 联动字段（即下一级的字段）
+            linkageKey: 's3'
+          }
         },
         {
           title: '县/区',
@@ -58,7 +74,11 @@ export default {
           type: JVXETypes.select,
           width: '180px',
           options: [],
-          placeholder: '请选择${title}'
+          placeholder: '请选择${title}',
+          params: {
+            key: 's3',
+            type: JVXETypes.select
+          }
         },
         {
           title: '一级',
@@ -67,7 +87,13 @@ export default {
           width: '180px',
           placeholder: '请选择${title}',
           // 联动字段（即下一级的字段）
-          linkageKey: 'level2'
+          linkageKey: 'level2',
+          params: {
+            key: 'level1',
+            type: JVXETypes.select,
+            // 联动字段（即下一级的字段）
+            linkageKey: 'level2'
+          }
         },
         {
           title: '二级',
@@ -76,14 +102,24 @@ export default {
           width: '180px',
           placeholder: '请选择${title}',
           // 联动字段（即下一级的字段）
-          linkageKey: 'level3'
+          linkageKey: 'level3',
+          params: {
+            key: 'level2',
+            type: JVXETypes.select,
+            // 联动字段（即下一级的字段）
+            linkageKey: 'level3'
+          }
         },
         {
           title: '三级',
           key: 'level3',
           type: JVXETypes.select,
           width: '180px',
-          placeholder: '请选择${title}'
+          placeholder: '请选择${title}',
+          params: {
+            key: 'level3',
+            type: JVXETypes.select
+          }
         }
       ],
       dataSource: [

jero-web/src/views/demo/JVxeDemo/demo/JSBCDemo.vue

@@ -23,8 +23,7 @@
       @remove="handleTableRemove"
       @edit-closed="handleEditClosed"
       @pageChange="handlePageChange"
-      @selectRowChange="handleSelectRowChange"
+      @selectRowChange="handleSelectRowChange" />
-    />
   </a-card>
 </template>
 
@@ -70,12 +69,22 @@ export default {
           // 列的宽度
           width: '180px',
           // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-          type: JVXETypes.input
+          type: JVXETypes.input,
+          params: {
+            type: JVXETypes.input
+          }
+        },
+        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
+        { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
+        { key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input, params: { defaultValue: 233, type: JVXETypes.input } },
+        {
+          key: 'payer',
+          title: '付款方',
+          width: '120px',
+          defaultValue: '张三',
+          type: JVXETypes.input,
+          params: { defaultValue: '张三', type: JVXETypes.input }
         },
-        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
-        { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
-        { key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input },
-        { key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input },
         { key: 'count', title: '数', width: '40px' },
         {
           key: 'company',
@@ -83,9 +92,12 @@ export default {
           // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
           // 如果要做占满表格的列可以这么写
           minWidth: '180px',
-          type: JVXETypes.input
+          type: JVXETypes.input,
+          params: {
+            type: JVXETypes.input
+          }
         },
-        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
       ],
       // 查询url地址
       url: {

jero-web/src/views/demo/JVxeDemo/demo/PopupSubTable.vue

@@ -16,80 +16,65 @@
     -->
 
     <j-vxe-table
-      :toolbar="true"
+      :toolbar="true" :row-number="true" :row-selection="true"
-      :row-number="true"
-      :row-selection="true"
 
-      highlight-current-row
+      highlight-current-row :click-row-show-sub-form="true" :click-row-show-main-form="true"
-      :click-row-show-sub-form="true"
-      :click-row-show-main-form="true"
 
-      :height="750"
+      :height="750" :loading="loading" :columns="columns" :dataSource="dataSource" @detailsConfirm="handleDetailsConfirm">
-      :loading="loading"
-      :columns="columns"
-      :dataSource="dataSource"
-      @detailsConfirm="handleDetailsConfirm"
-    >
 
       <!-- 主表单 -->
       <template v-slot:mainForm="{row}">
         <template v-if="row">
-          <a-form-model
+          <a-form-model ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            ref="form2"
-            :model="row"
-            :rules="rules"
-            :label-col="labelCol"
-            :wrapper-col="wrapperCol"
-          >
             <a-row :gutter="8">
               <a-col :span="8">
                 <a-form-model-item label="ID" prop="id">
-                  <a-input v-model="row.id" disabled/>
+                  <a-input v-model="row.id" disabled />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="序号" prop="num">
-                  <a-input v-model="row.num"/>
+                  <a-input v-model="row.num" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="船名" prop="ship_name">
-                  <a-input v-model="row.ship_name"/>
+                  <a-input v-model="row.ship_name" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="呼叫" prop="call">
-                  <a-input v-model="row.call"/>
+                  <a-input v-model="row.call" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="长" prop="len">
-                  <a-input v-model="row.len"/>
+                  <a-input v-model="row.len" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="吨" prop="ton">
-                  <a-input v-model="row.ton"/>
+                  <a-input v-model="row.ton" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="付款方" prop="payer">
-                  <a-input v-model="row.payer"/>
+                  <a-input v-model="row.payer" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="数" prop="count">
-                  <a-input v-model="row.count"/>
+                  <a-input v-model="row.count" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="公司" prop="company">
-                  <a-input v-model="row.company"/>
+                  <a-input v-model="row.company" />
                 </a-form-model-item>
               </a-col>
               <a-col :span="8">
                 <a-form-model-item label="动向" prop="trend">
-                  <a-input v-model="row.trend"/>
+                  <a-input v-model="row.trend" />
                 </a-form-model-item>
               </a-col>
             </a-row>
@@ -107,8 +92,7 @@
             :max-height="350"
             :loading="subTable.loading"
             :columns="subTable.columns"
-            :dataSource="subTable.dataSource"
+            :dataSource="subTable.dataSource" />
-          />
         </template>
       </template>
 
@@ -130,7 +114,7 @@ export default {
       dataSource: [],
       columns: [
         { key: 'num', title: '序号', width: '80px' },
-        { key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
+        { key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
         { key: 'call', title: '呼叫', width: '80px' },
         { key: 'len', title: '长', width: '80px' },
         { key: 'ton', title: '吨', width: '120px' },
@@ -143,7 +127,10 @@ export default {
           // 是否点击显示详细信息
           // 只有当前单元格不能编辑的时候才能生效
           // 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
-          showDetails: true
+          showDetails: true,
+          params: {
+            showDetails: true
+          }
         },
         { key: 'trend', title: '动向', width: '120px' }
       ],
@@ -156,11 +143,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 查询url地址

jero-web/src/views/demo/JVxeDemo/demo/SocketReload.vue

@@ -3,7 +3,7 @@
 
     <div style="margin-bottom: 8px;">
       <span>启用数据变动特效：</span>
-      <a-switch v-model="reloadEffect"/>
+      <a-switch v-model="reloadEffect" />
     </div>
 
     <!--
@@ -47,14 +47,14 @@ export default {
       dataSource: [],
       columns: [
         { key: 'num', title: '序号', width: '80px' },
-        { key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
+        { key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
+        { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
+        { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+        { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
         { key: 'count', title: '数', width: '40px' },
-        { key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input },
+        { key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
       ],
       // 查询url地址
       url: {

jero-web/src/views/demo/JVxeDemo/layout-demo/ErpTemplate.vue

@@ -19,8 +19,7 @@
       style="margin-bottom: 8px"
 
       @pageChange="handleTable1PageChange"
-      @selectRowChange="handleTable1SelectRowChange"
+      @selectRowChange="handleTable1SelectRowChange"></j-vxe-table>
-    ></j-vxe-table>
 
     <a-tabs v-show="subTabs.show" :class="{'sub-tabs':true, 'un-expand': !subTabs.expand}">
       <a-tab-pane tab="子表1" key="1">
@@ -35,8 +34,7 @@
           :dataSource="table2.dataSource"
           :pagination="table2.pagination"
           @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
+          @selectRowChange="handleTable2SelectRowChange" />
-        />
       </a-tab-pane>
       <a-tab-pane tab="子表2" key="2">
         <h1>这里是子表2</h1>
@@ -100,7 +98,7 @@ export default {
             if (this.subTabs.show) {
               const expand = (<span>
                 <a-button type="link" onClick={this.handleToggleTabs}>
-                  <a-icon type={this.subTabs.expand ? 'up' : 'down'}/>
+                  <a-icon type={this.subTabs.expand ? 'up' : 'down'} />
                   <span>{this.subTabs.expand ? '收起' : '展开'}</span>
                 </a-button>
                 <a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
@@ -128,12 +126,15 @@ export default {
             // 列的宽度
             width: '180px',
             // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input },
+          { key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
+          { key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
-          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
+          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
-          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
           { key: 'count', title: '数', width: '40px' },
           {
             key: 'company',
@@ -141,9 +142,12 @@ export default {
             // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
             // 如果要做占满表格的列可以这么写
             minWidth: '180px',
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -155,11 +159,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       currentSubRow: null,
@@ -285,23 +289,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .sub-tabs {
+.sub-tabs {
-    &.un-expand {
+  &.un-expand {
-      /deep/ .ant-tabs-content {
+    /deep/ .ant-tabs-content {
-        height: 0 !important;
+      height: 0 !important;
-      }
+    }
 
-      /deep/ .ant-tabs-bar {
+    /deep/ .ant-tabs-bar {
-        border-color: transparent !important;
+      border-color: transparent !important;
-      }
+    }
 
-      /deep/ .ant-tabs-ink-bar {
+    /deep/ .ant-tabs-ink-bar {
-        background-color: transparent !important;
+      background-color: transparent !important;
-      }
+    }
 
-      /deep/ .ant-tabs-tab {
+    /deep/ .ant-tabs-tab {
-        display: none !important;
+      display: none !important;
-      }
     }
   }
+}
 </style>

jero-web/src/views/demo/JVxeDemo/layout-demo/Template1.vue

@@ -17,8 +17,7 @@
           :dataSource="table1.dataSource"
           :pagination="table1.pagination"
           @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
+          @selectRowChange="handleTable1SelectRowChange" />
-        />
       </a-col>
       <!-- 这里是子级节点 -->
       <a-col :span="12">
@@ -36,9 +35,7 @@
           :dataSource="table2.dataSource"
           :pagination="table2.pagination"
           @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
+          @selectRowChange="handleTable2SelectRowChange"></j-vxe-table>
-        >
-        </j-vxe-table>
       </a-col>
       <!-- 这里是孙级节点 -->
       <a-col :span="12">
@@ -51,9 +48,7 @@
           :columns="table3.columns"
           :dataSource="table3.dataSource"
           :pagination="table3.pagination"
-          @pageChange="handleTable3PageChange"
+          @pageChange="handleTable3PageChange"></j-vxe-table>
-        >
-        </j-vxe-table>
       </a-col>
     </a-row>
   </a-card>
@@ -106,12 +101,15 @@ export default {
                 foo += '-233'
               }
               return cellValue + foo
+            },
+            params: {
+              type: JVXETypes.input
             }
           },
-          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
+          { key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
-          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
+          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
-          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
           { key: 'count', title: '数', width: '40px' },
           {
             key: 'company',
@@ -119,9 +117,12 @@ export default {
             // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
             // 如果要做占满表格的列可以这么写
             minWidth: '180px',
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -134,11 +135,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -149,10 +150,10 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'power', title: '马力', width: '120px', type: JVXETypes.input },
+          { key: 'power', title: '马力', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'nature', title: '性质', width: '120px', type: JVXETypes.input },
+          { key: 'nature', title: '性质', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input }
+          { key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 查询url地址

jero-web/src/views/demo/JVxeDemo/layout-demo/Template2.vue

@@ -17,20 +17,15 @@
           :dataSource="table1.dataSource"
           :pagination="table1.pagination"
           @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
+          @selectRowChange="handleTable1SelectRowChange" />
-        />
       </a-col>
       <a-col :span="12">
 
         <!-- 左侧选择的数据展示在这里 -->
         <j-vxe-table
-          :row-number="true"
+          :row-number="true" :height="381"
-          :height="381"
 
-          :columns="table1.columns"
+          :columns="table1.columns" :dataSource="table1.selectedRows" style="margin: 40px 0 8px;" />
-          :dataSource="table1.selectedRows"
-          style="margin: 40px 0 8px;"
-        />
 
         <!-- 右下子 -->
         <j-vxe-table
@@ -44,8 +39,7 @@
           :dataSource="table2.dataSource"
           :pagination="table2.pagination"
           @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
+          @selectRowChange="handleTable2SelectRowChange" />
-        />
       </a-col>
     </a-row>
 
@@ -92,12 +86,15 @@ export default {
             // 列的宽度
             width: '180px',
             // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
+          { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
+          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
           { key: 'count', title: '数', width: '40px' },
           {
             key: 'company',
@@ -105,9 +102,12 @@ export default {
             // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
             // 如果要做占满表格的列可以这么写
             minWidth: '180px',
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -118,11 +118,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 查询url地址

jero-web/src/views/demo/JVxeDemo/layout-demo/Template3.vue

@@ -19,8 +19,7 @@
           :pagination="table1.pagination"
           style="margin-bottom: 8px;"
           @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
+          @selectRowChange="handleTable1SelectRowChange" />
-        />
 
         <!-- 左下子 -->
         <j-vxe-table
@@ -33,18 +32,11 @@
           :columns="table2.columns"
           :dataSource="table2.dataSource"
           :pagination="table2.pagination"
-          @pageChange="handleTable2PageChange"
+          @pageChange="handleTable2PageChange" />
-        />
       </a-col>
       <!-- 左侧父选择的数据展示在这里 -->
       <a-col :span="12">
-        <j-vxe-table
+        <j-vxe-table :row-number="true" :height="800" :columns="table1.columns" :dataSource="table1.selectedRows" style="margin-top: 40px;" />
-          :row-number="true"
-          :height="800"
-          :columns="table1.columns"
-          :dataSource="table1.selectedRows"
-          style="margin-top: 40px;"
-        />
       </a-col>
     </a-row>
 
@@ -93,15 +85,18 @@ export default {
             // 列的宽度
             width: '180px',
             // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
+          { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
+          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
           { key: 'count', title: '数', width: '40px' },
-          { key: 'company', title: '公司', width: '180px', type: JVXETypes.input },
+          { key: 'company', title: '公司', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 子表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -111,11 +106,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 查询url地址

jero-web/src/views/demo/JVxeDemo/layout-demo/Template4.vue

@@ -19,8 +19,7 @@
           :pagination="table1.pagination"
           style="margin-bottom: 8px;"
           @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
+          @selectRowChange="handleTable1SelectRowChange" />
-        />
         <!-- 左下子 -->
         <j-vxe-table
           :toolbar="true"
@@ -32,8 +31,7 @@
           :columns="table2.columns"
           :dataSource="table2.dataSource"
           :pagination="table2.pagination"
-          @pageChange="handleTable2PageChange"
+          @pageChange="handleTable2PageChange" />
-        />
       </a-col>
       <!-- 左侧父选择的数据展示在这里 -->
       <a-col :span="12">
@@ -49,8 +47,7 @@
           :columns="table1.columns"
           :dataSource="table1.selectedRows"
           style="margin: 40px 0 8px;"
-          @selectRowChange="handleTable3SelectRowChange"
+          @selectRowChange="handleTable3SelectRowChange" />
-        />
         <!-- 右下子 -->
         <j-vxe-table
           :toolbar="true"
@@ -62,8 +59,7 @@
           :columns="table4.columns"
           :dataSource="table4.dataSource"
           :pagination="table4.pagination"
-          style="margin: 48px 0 0;"
+          style="margin: 48px 0 0;" />
-        />
       </a-col>
     </a-row>
 
@@ -109,12 +105,15 @@ export default {
             // 列的宽度
             width: '180px',
             // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+          { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
+          { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
+          { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+          { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
           { key: 'count', title: '数', width: '40px' },
           {
             key: 'company',
@@ -122,9 +121,12 @@ export default {
             // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
             // 如果要做占满表格的列可以这么写
             minWidth: '180px',
-            type: JVXETypes.input
+            type: JVXETypes.input,
+            params: {
+              type: JVXETypes.input
+            }
           },
-          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+          { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
@@ -135,11 +137,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       table3: {
@@ -155,11 +157,11 @@ export default {
         dataSource: [],
         columns: [
           { key: 'dd_num', title: '调度序号', width: '120px' },
-          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
+          { key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
+          { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
+          { key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
+          { key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
         ]
       },
       // 查询url地址

jero-web/src/views/demo/JVxeDemo/layout-demo/Template5.vue

@@ -12,10 +12,9 @@
           :expandedKeys="treeExpandedKeys"
           :selectedKeys="[pagination.current]"
           @expand="handleTreeExpand"
-          @select="handleTreeSelect"
+          @select="handleTreeSelect">
-        >
           <!-- 自定义子节点图标 -->
-          <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
+          <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;" />
         </a-tree>
       </a-col>
       <a-col :span="18">
@@ -27,8 +26,7 @@
           :columns="columns"
           :dataSource="dataSource"
           :pagination="pagination"
-          @pageChange="handleTablePageChange"
+          @pageChange="handleTablePageChange" />
-        />
       </a-col>
     </a-row>
 
@@ -72,12 +70,15 @@ export default {
           // 列的宽度
           width: '180px',
           // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-          type: JVXETypes.input
+          type: JVXETypes.input,
+          params: {
+            type: JVXETypes.input
+          }
         },
-        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
+        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
+        { key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
+        { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
-        { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
+        { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
         { key: 'count', title: '数', width: '40px' },
         {
           key: 'company',
@@ -85,9 +86,12 @@ export default {
           // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
           // 如果要做占满表格的列可以这么写
           minWidth: '180px',
-          type: JVXETypes.input
+          type: JVXETypes.input,
+          params: {
+            type: JVXETypes.input
+          }
         },
-        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
+        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
       ],
       // 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
       treeData: [
@@ -214,10 +218,10 @@ export default {
 </script>
 
 <style lang="less">
-  /** 隐藏文件小图标 */
+/** 隐藏文件小图标 */
-  .template-5-tree.ant-tree {
+.template-5-tree.ant-tree {
-    li span.ant-tree-switcher.ant-tree-switcher-noop {
+  li span.ant-tree-switcher.ant-tree-switcher-noop {
-      display: none;
+    display: none;
-    }
   }
+}
 </style>