vxe-table 3.5.9-beta.3 → 3.5.9-beta.6

package/lib/v-x-e-table/index.js

@@ -221,7 +221,7 @@ var v = 'v3';
 exports.v = v;
 var VXETable = {
   v: v,
-  version: "3.5.9-beta.2",
+  version: "3.5.9-beta.6",
   reg: reg,
   use: use,
   setup: _setup.setup,

package/lib/v-x-e-table/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={use:!0,config:!0,t:!0,_t:!0,v:!0,VXETable:!0};exports.VXETable=void 0,exports._t=_t,exports.default=exports.config=void 0,exports.t=t,exports.use=use,exports.v=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_conf=_interopRequireDefault(require("../v-x-e-table/src/conf")),_interceptor=require("./src/interceptor");Object.keys(_interceptor).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_interceptor[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _interceptor[e]}}))});var _renderer=require("./src/renderer");Object.keys(_renderer).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_renderer[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _renderer[e]}}))});var _commands=require("./src/commands");Object.keys(_commands).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_commands[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _commands[e]}}))});var _menus=require("./src/menus");Object.keys(_menus).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_menus[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _menus[e]}}))});var _formats=require("./src/formats");Object.keys(_formats).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_formats[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _formats[e]}}))});var _setup=require("./src/setup");Object.keys(_setup).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_setup[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _setup[e]}}))});var _utils=require("../tools/utils"),_log=require("../tools/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}var installedPlugins=[];function use(e,t){return e&&e.install&&-1===installedPlugins.indexOf(e)&&(e.install(VXETable,t),installedPlugins.push(e)),VXETable}function reg(e){"development"===process.env.NODE_ENV&&VXETable.Table&&(0,_log.errLog)("vxe.error.useErr",[e]),VXETable["_".concat(e)]=1}function getExportOrImpotType(e,r){var o=[];return _xeUtils.default.objectEach(e,function(e,t){0!==e&&e!==r||o.push(t)}),o}var VXETableConfig=function(){function e(){_classCallCheck(this,e)}return _createClass(e,[{key:"zIndex",get:function(){return _utils.UtilTools.getLastZIndex()}},{key:"nextZIndex",get:function(){return _utils.UtilTools.nextZIndex()}},{key:"exportTypes",get:function(){return getExportOrImpotType(_conf.default.export.types,1)}},{key:"importTypes",get:function(){return getExportOrImpotType(_conf.default.export.types,2)}}]),e}(),config=new VXETableConfig;function t(e,t){return _conf.default.i18n(e,t)}function _t(e,t){return e?_xeUtils.default.toValueString(_conf.default.translate?_conf.default.translate(e,t):e):""}exports.config=config;var v="v3",VXETable={v:exports.v=v,version:"3.5.9-beta.2",reg:reg,use:use,setup:_setup.setup,interceptor:_interceptor.interceptor,renderer:_renderer.renderer,commands:_commands.commands,formats:_formats.formats,menus:_menus.menus,config:config,t:t,_t:_t},_default=exports.VXETable=VXETable;exports.default=_default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={use:!0,config:!0,t:!0,_t:!0,v:!0,VXETable:!0};exports.VXETable=void 0,exports._t=_t,exports.default=exports.config=void 0,exports.t=t,exports.use=use,exports.v=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_conf=_interopRequireDefault(require("../v-x-e-table/src/conf")),_interceptor=require("./src/interceptor");Object.keys(_interceptor).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_interceptor[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _interceptor[e]}}))});var _renderer=require("./src/renderer");Object.keys(_renderer).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_renderer[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _renderer[e]}}))});var _commands=require("./src/commands");Object.keys(_commands).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_commands[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _commands[e]}}))});var _menus=require("./src/menus");Object.keys(_menus).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_menus[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _menus[e]}}))});var _formats=require("./src/formats");Object.keys(_formats).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_formats[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _formats[e]}}))});var _setup=require("./src/setup");Object.keys(_setup).forEach(function(e){"default"!==e&&"__esModule"!==e&&(Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_setup[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _setup[e]}}))});var _utils=require("../tools/utils"),_log=require("../tools/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}var installedPlugins=[];function use(e,t){return e&&e.install&&-1===installedPlugins.indexOf(e)&&(e.install(VXETable,t),installedPlugins.push(e)),VXETable}function reg(e){"development"===process.env.NODE_ENV&&VXETable.Table&&(0,_log.errLog)("vxe.error.useErr",[e]),VXETable["_".concat(e)]=1}function getExportOrImpotType(e,r){var o=[];return _xeUtils.default.objectEach(e,function(e,t){0!==e&&e!==r||o.push(t)}),o}var VXETableConfig=function(){function e(){_classCallCheck(this,e)}return _createClass(e,[{key:"zIndex",get:function(){return _utils.UtilTools.getLastZIndex()}},{key:"nextZIndex",get:function(){return _utils.UtilTools.nextZIndex()}},{key:"exportTypes",get:function(){return getExportOrImpotType(_conf.default.export.types,1)}},{key:"importTypes",get:function(){return getExportOrImpotType(_conf.default.export.types,2)}}]),e}(),config=new VXETableConfig;function t(e,t){return _conf.default.i18n(e,t)}function _t(e,t){return e?_xeUtils.default.toValueString(_conf.default.translate?_conf.default.translate(e,t):e):""}exports.config=config;var v="v3",VXETable={v:exports.v=v,version:"3.5.9-beta.6",reg:reg,use:use,setup:_setup.setup,interceptor:_interceptor.interceptor,renderer:_renderer.renderer,commands:_commands.commands,formats:_formats.formats,menus:_menus.menus,config:config,t:t,_t:_t},_default=exports.VXETable=VXETable;exports.default=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.5.9-beta.3",
+  "version": "3.5.9-beta.6",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",

package/packages/edit/src/mixin.js

@@ -189,7 +189,7 @@ export default {
       const { afterFullData, tableFullData, tableFullTreeData, treeConfig, mergeList, editStore, checkboxOpts, selection, isInsertByRow, treeOpts } = this
       const { transform } = treeOpts
       const { actived, removeList, insertList } = editStore
-      const { checkField: property } = checkboxOpts
+      const { checkField } = checkboxOpts
       let rest = []
       if (!rows) {
         rows = tableFullData
@@ -203,7 +203,7 @@ export default {
         }
       })
       // 如果绑定了多选属性，则更新状态
-      if (!property) {
+      if (!checkField) {
         rows.forEach(row => {
           const sIndex = selection.indexOf(row)
           if (sIndex > -1) {
@@ -380,16 +380,17 @@ export default {
      */
     handleActived (params, evnt) {
       const { editStore, editOpts, tableColumn, editConfig, mouseConfig } = this
-      const { mode, activeMethod } = editOpts
+      const { mode } = editOpts
       const { actived } = editStore
       const { row, column } = params
       const { editRender } = column
       const cell = params.cell = (params.cell || this.getCell(row, column))
+      const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
       if (isEnableConf(editConfig) && isEnableConf(editRender) && cell) {
         if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
           // 判断是否禁用编辑
           let type = 'edit-disabled'
-          if (!activeMethod || activeMethod({ ...params, $table: this })) {
+          if (!beforeEditMethod || beforeEditMethod({ ...params, $table: this })) {
             if (mouseConfig) {
               this.clearSelected(evnt)
               this.clearCellAreas(evnt)

package/packages/filter/src/mixin.js

@@ -130,13 +130,13 @@ export default {
           filterStore.maxHeight = maxHeight
         })
       }
-      this.emitEvent('filter-visible', { column, property: column.property, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt)
+      this.emitEvent('filter-visible', { column, field: column.field, property: column.field, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt)
     },
     _getCheckedFilters () {
       const { tableFullColumn } = this
       const filterList = []
       tableFullColumn.filter(column => {
-        const { property, filters } = column
+        const { field, filters } = column
         const valueList = []
         const dataList = []
         if (filters && filters.length) {
@@ -147,7 +147,7 @@ export default {
             }
           })
           if (valueList.length) {
-            filterList.push({ column, property, values: valueList, datas: dataList })
+            filterList.push({ column, field, property: field, values: valueList, datas: dataList })
           }
         }
       })
@@ -161,7 +161,7 @@ export default {
     confirmFilterEvent (evnt) {
       const { filterStore, filterOpts, scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = this
       const { column } = filterStore
-      const { property } = column
+      const { field } = column
       const values = []
       const datas = []
       column.filters.forEach(item => {
@@ -176,7 +176,7 @@ export default {
         this.handleTableData(true)
         this.checkSelectionStatus()
       }
-      this.emitEvent('filter-change', { column, property, values, datas, filters: filterList, filterList }, evnt)
+      this.emitEvent('filter-change', { column, field, property: field, values, datas, filters: filterList, filterList }, evnt)
       this.closeFilter()
       this.updateFooter().then(() => {
         const { scrollXLoad, scrollYLoad } = this

package/packages/form/src/form-item.js

@@ -54,7 +54,7 @@ const renderItem = (h, _vm, item, slots) => {
   const showTitle = itemOverflow === 'title'
   const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
   const hasEllipsis = showTitle || showTooltip || showEllipsis
-  const params = { data, property: field, item, $form: _vm }
+  const params = { data, field, property: field, item, $form: _vm }
   let isRequired
   if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
     itemVisibleMethod = compConf.itemVisibleMethod

package/packages/form/src/render.js

@@ -26,7 +26,7 @@ export function renderTitle (h, _vm, item) {
   const { data, tooltipOpts } = _vm
   const { slots, field, itemRender, titlePrefix, titleSuffix } = item
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
-  const params = { data, property: field, item, $form: _vm }
+  const params = { data, field, property: field, item, $form: _vm }
   const contVNs = []
   const titVNs = []
   if (titlePrefix) {

package/packages/grid/src/grid.js

@@ -226,7 +226,7 @@ export default {
         }
       }
       if (editConfig) {
-        tableProps.editConfig = Object.assign({}, editConfig, { activeMethod: this.handleActiveMethod })
+        tableProps.editConfig = Object.assign({}, editConfig, { beforeEditMethod: this.handleBeforeEditMethod })
       }
       return tableProps
     }
@@ -400,10 +400,13 @@ export default {
       clss.push(rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : '')
       return clss
     },
-    handleActiveMethod (params) {
+    handleBeforeEditMethod (params) {
       const { editConfig } = this
-      const activeMethod = editConfig ? editConfig.activeMethod : null
-      return this.pendingRecords.indexOf(params.row) === -1 && (!activeMethod || activeMethod({ ...params, $grid: this }))
+      const beforeEditMethod = editConfig ? (editConfig.beforeEditMethod || editConfig.activeMethod) : null
+      if (this.pendingRecords.indexOf(params.row) === -1) {
+        return !beforeEditMethod || beforeEditMethod({ ...params, $grid: this })
+      }
+      return false
     },
     initToolbar () {
       this.$nextTick(() => {

package/packages/locale/lang/en-US.js

@@ -149,6 +149,8 @@ export default {
       operError: 'Error occurred, operation failed!'
     },
     select: {
+      search: 'Search',
+      loadingText: 'Loading',
       emptyText: 'No Data'
     },
     pager: {

package/packages/locale/lang/ja-JP.js

@@ -149,6 +149,8 @@ export default {
       operError: 'エラーが発生しました。操作が失敗しました'
     },
     select: {
+      search: 'Search',
+      loadingText: 'Loading',
       emptyText: 'データがありません'
     },
     pager: {

package/packages/locale/lang/zh-CN.js

@@ -149,6 +149,8 @@ export default {
       operError: '发生错误，操作失败！'
     },
     select: {
+      search: '搜索',
+      loadingText: '加载中',
       emptyText: '暂无数据'
     },
     pager: {

package/packages/locale/lang/zh-TC.js

@@ -149,6 +149,8 @@ export default {
       operError: '發生錯誤，操作失敗！'
     },
     select: {
+      search: '蒐索',
+      loadingText: '加載中',
       emptyText: '暫無資料'
     },
     pager: {

package/packages/select/src/select.js

@@ -4,7 +4,7 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import vSize from '../../mixins/size'
 import UtilTools, { getFuncText } from '../../tools/utils'
 import DomTools from '../../tools/dom'
-import { GlobalEvent } from '../../tools/event'
+import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 
 function isOptionVisible (option) {
   return option.visible !== false
@@ -112,6 +112,13 @@ function findOption (_vm, optionValue) {
   return fullOptionList.find(item => optionValue === item[valueField])
 }
 
+function getRemoteSelectLabel (_vm, value) {
+  const { remoteValueList } = _vm
+  const remoteItem = remoteValueList.find(item => value === item.key)
+  const item = remoteItem ? remoteItem.result : null
+  return XEUtils.toValueString(item ? item[_vm.labelField] : value)
+}
+
 function getSelectLabel (_vm, value) {
   const item = findOption(_vm, value)
   return XEUtils.toValueString(item ? item[_vm.labelField] : value)
@@ -141,7 +148,7 @@ export function renderOption (h, _vm, list, group) {
         mousedown: _vm.mousedownOptionEvent,
         click: (evnt) => {
           if (!isDisabled) {
-            _vm.changeOptionEvent(evnt, optionValue)
+            _vm.changeOptionEvent(evnt, optionValue, option)
           }
         },
         mouseenter: () => {
@@ -182,7 +189,21 @@ export function renderOptgroup (h, _vm) {
 }
 
 function renderOpts (h, _vm) {
-  const { isGroup, visibleGroupList, visibleOptionList } = _vm
+  const { isGroup, visibleGroupList, visibleOptionList, searchLoading } = _vm
+  if (searchLoading) {
+    return [
+      h('div', {
+        class: 'vxe-select--search-loading'
+      }, [
+        h('i', {
+          class: ['vxe-select--search-icon', GlobalConfig.icon.SELECT_LOADED]
+        }),
+        h('span', {
+          class: 'vxe-select--search-text'
+        }, GlobalConfig.i18n('vxe.select.loadingText'))
+      ])
+    ]
+  }
   if (isGroup) {
     if (visibleGroupList.length) {
       return renderOptgroup(h, _vm)
@@ -219,6 +240,10 @@ export default {
     optionConfig: Object,
     className: [String, Function],
     size: { type: String, default: () => GlobalConfig.select.size || GlobalConfig.size },
+    filterable: Boolean,
+    filterMethod: Function,
+    remote: Boolean,
+    remoteMethod: Function,
     emptyText: String,
     // 已废弃，被 option-config.keyField 替换
     optionId: { type: String, default: () => GlobalConfig.select.optionId },
@@ -250,13 +275,17 @@ export default {
       fullOptionList: [],
       visibleGroupList: [],
       visibleOptionList: [],
+      remoteValueList: [],
       panelIndex: 0,
       panelStyle: null,
       panelPlacement: null,
+      currentOption: null,
       currentValue: null,
       visiblePanel: false,
       animatVisible: false,
-      isActivated: false
+      isActivated: false,
+      searchValue: '',
+      searchLoading: false
     }
   },
   computed: {
@@ -288,9 +317,13 @@ export default {
       return XEUtils.toNumber(this.multiCharOverflow)
     },
     selectLabel () {
-      const { value, multiple, multiMaxCharNum } = this
+      const { value, multiple, remote, multiMaxCharNum } = this
       if (value && multiple) {
-        return (XEUtils.isArray(value) ? value : [value]).map(val => {
+        const vals = (XEUtils.isArray(value) ? value : [value])
+        if (remote) {
+          return vals.map(val => getRemoteSelectLabel(this, val)).join(', ')
+        }
+        return vals.map(val => {
           const label = getSelectLabel(this, val)
           if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
             return `${label.substring(0, multiMaxCharNum)}...`
@@ -298,6 +331,9 @@ export default {
           return label
         }).join(', ')
       }
+      if (remote) {
+        return getRemoteSelectLabel(this, value)
+      }
       return getSelectLabel(this, value)
     }
   },
@@ -349,13 +385,14 @@ export default {
     GlobalEvent.off(this, 'blur')
   },
   render (h) {
-    const { $scopedSlots, vSize, className, inited, isActivated, loading, disabled, visiblePanel } = this
+    const { _e, $scopedSlots, vSize, className, inited, isActivated, loading, disabled, visiblePanel, filterable } = this
     const prefixSlot = $scopedSlots.prefix
     return h('div', {
       class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
         'is--visivle': visiblePanel,
         'is--disabled': disabled,
+        'is--filter': filterable,
         'is--loading': loading,
         'is--active': isActivated
       }]
@@ -400,6 +437,28 @@ export default {
         },
         style: this.panelStyle
       }, inited ? [
+        filterable ? h('div', {
+          class: 'vxe-select-filter--wrapper'
+        }, [
+          h('vxe-input', {
+            ref: 'inpSearch',
+            class: 'vxe-select-filter--input',
+            props: {
+              value: this.searchValue,
+              type: 'text',
+              clearable: true,
+              placeholder: GlobalConfig.i18n('vxe.select.search'),
+              prefixIcon: GlobalConfig.icon.INPUT_SEARCH
+            },
+            on: {
+              modelValue: this.modelSearchEvent,
+              focus: this.focusSearchEvent,
+              keydown: this.keydownSearchEvent,
+              change: this.triggerSearchEvent,
+              search: this.triggerSearchEvent
+            }
+          })
+        ]) : _e(),
         h('div', {
           ref: 'optWrapper',
           class: 'vxe-select-option--wrapper'
@@ -441,19 +500,32 @@ export default {
       this.refreshOption()
     },
     /**
-     * 刷新选项，当选项被动态显示/隐藏时可能会用到
+     * 刷新选项，当选项被搜索、动态显示/隐藏时可能会用到
      */
     refreshOption () {
-      const { isGroup, fullOptionList, fullGroupList } = this
+      const { isGroup, fullOptionList, fullGroupList, filterable, filterMethod, searchValue, labelField, groupLabelField } = this
       if (isGroup) {
-        this.visibleGroupList = fullGroupList.filter(isOptionVisible)
+        if (filterable && filterMethod) {
+          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && filterMethod({ group, option: null, searchValue }))
+        } else if (filterable) {
+          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && (!searchValue || `${group[groupLabelField]}`.indexOf(searchValue) > -1))
+        } else {
+          this.visibleGroupList = fullGroupList.filter(isOptionVisible)
+        }
       } else {
-        this.visibleOptionList = fullOptionList.filter(isOptionVisible)
+        if (filterable && filterMethod) {
+          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && filterMethod({ group: null, option, searchValue }))
+        } else if (filterable) {
+          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && (!searchValue || `${option[labelField]}`.indexOf(searchValue) > -1))
+        } else {
+          this.visibleOptionList = fullOptionList.filter(isOptionVisible)
+        }
       }
       return this.$nextTick()
     },
     setCurrentOption (option) {
       if (option) {
+        this.currentOption = option
         this.currentValue = option[this.valueField]
       }
     },
@@ -484,6 +556,7 @@ export default {
       this.hideOptionPanel()
     },
     clearValueEvent (evnt, selectValue) {
+      this.remoteValueList = []
       this.changeEvent(evnt, selectValue)
       this.$emit('clear', { value: selectValue, $event: evnt })
     },
@@ -503,8 +576,8 @@ export default {
         evnt.stopPropagation()
       }
     },
-    changeOptionEvent (evnt, selectValue) {
-      const { value, multiple } = this
+    changeOptionEvent (evnt, selectValue, option) {
+      const { value, multiple, remoteValueList } = this
       if (multiple) {
         let multipleValue
         if (value) {
@@ -516,8 +589,15 @@ export default {
         } else {
           multipleValue = [selectValue]
         }
+        const remoteItem = remoteValueList.find(item => item.key === selectValue)
+        if (remoteItem) {
+          remoteItem.result = option
+        } else {
+          remoteValueList.push({ key: selectValue, result: option })
+        }
         this.changeEvent(evnt, multipleValue)
       } else {
+        this.remoteValueList = [{ key: selectValue, result: option }]
         this.changeEvent(evnt, selectValue)
         this.hideOptionPanel()
       }
@@ -544,7 +624,7 @@ export default {
       }
     },
     handleGlobalKeydownEvent (evnt) {
-      const { visiblePanel, currentValue, clearable, disabled } = this
+      const { visiblePanel, currentValue, currentOption, clearable, disabled } = this
       if (!disabled) {
         const keyCode = evnt.keyCode
         const isTab = keyCode === 9
@@ -563,7 +643,7 @@ export default {
           } else if (isEnter) {
             evnt.preventDefault()
             evnt.stopPropagation()
-            this.changeOptionEvent(evnt, currentValue)
+            this.changeOptionEvent(evnt, currentValue, currentOption)
           } else if (isUpArrow || isDwArrow) {
             evnt.preventDefault()
             let { firstOption, offsetOption } = findOffsetOption(this, currentValue, isUpArrow)
@@ -594,6 +674,15 @@ export default {
         this.panelIndex = UtilTools.nextZIndex()
       }
     },
+    handleFocusSearch () {
+      if (this.filterable) {
+        this.$nextTick(() => {
+          if (this.$refs.inpSearch) {
+            this.$refs.inpSearch.focus()
+          }
+        })
+      }
+    },
     focusEvent () {
       if (!this.disabled) {
         this.isActivated = true
@@ -602,6 +691,32 @@ export default {
     blurEvent () {
       this.isActivated = false
     },
+    modelSearchEvent (value) {
+      this.searchValue = value
+    },
+    focusSearchEvent () {
+      this.isActivated = true
+    },
+    keydownSearchEvent (params) {
+      const { $event } = params
+      const isEnter = hasEventKey($event, EVENT_KEYS.ENTER)
+      if (isEnter) {
+        $event.preventDefault()
+        $event.stopPropagation()
+      }
+    },
+    triggerSearchEvent: XEUtils.debounce(function () {
+      const { remote, remoteMethod, searchValue } = this
+      if (remote && remoteMethod) {
+        this.searchLoading = true
+        Promise.resolve(remoteMethod({ searchValue })).then(() => this.$nextTick()).catch(() => this.$nextTick()).finally(() => {
+          this.searchLoading = false
+          this.refreshOption()
+        })
+      } else {
+        this.refreshOption()
+      }
+    }, 350, { trailing: true }),
     isPanelVisible () {
       return this.visiblePanel
     },
@@ -635,8 +750,9 @@ export default {
       }
     },
     showOptionPanel () {
-      const { loading, disabled } = this
+      const { loading, disabled, filterable } = this
       if (!loading && !disabled) {
+        this.searchList = this.option
         clearTimeout(this.hidePanelTimeout)
         if (!this.inited) {
           this.inited = true
@@ -646,6 +762,9 @@ export default {
         }
         this.isActivated = true
         this.animatVisible = true
+        if (filterable) {
+          this.refreshOption()
+        }
         setTimeout(() => {
           const { value, multiple } = this
           const currOption = findOption(this, multiple && value ? value[0] : value)
@@ -654,15 +773,19 @@ export default {
             this.setCurrentOption(currOption)
             this.scrollToOption(currOption)
           }
+          this.handleFocusSearch()
         }, 10)
         this.updateZindex()
         this.updatePlacement()
       }
     },
     hideOptionPanel () {
+      this.searchValue = ''
+      this.searchLoading = false
       this.visiblePanel = false
       this.hidePanelTimeout = setTimeout(() => {
         this.animatVisible = false
+        this.searchValue = ''
       }, 350)
     },
     updatePlacement () {

package/packages/table/src/body.js

@@ -205,7 +205,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
   }
   // 如果编辑列开启显示状态
   if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
-    isDirty = $xetable.isUpdateByRow(row, column.property)
+    isDirty = $xetable.isUpdateByRow(row, column.field)
   }
   const tdVNs = []
   if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {

package/packages/table/src/cell.js

@@ -478,7 +478,7 @@ export const Cell = {
   renderCheckboxCellByProp (h, params) {
     const { $table, row, column, isHidden } = params
     const { treeConfig, treeIndeterminates } = $table
-    const { labelField, checkField: property, halfField, checkMethod, visibleMethod } = $table.checkboxOpts
+    const { labelField, checkField, halfField, checkMethod, visibleMethod } = $table.checkboxOpts
     const { slots } = column
     const defaultSlot = slots ? slots.default : null
     const checkboxSlot = slots ? slots.checkbox : null
@@ -488,7 +488,7 @@ export const Cell = {
     let isDisabled = !!checkMethod
     let on
     if (!isHidden) {
-      isChecked = XEUtils.get(row, property)
+      isChecked = XEUtils.get(row, checkField)
       on = {
         click (evnt) {
           if (!isDisabled && isVisible) {
@@ -712,7 +712,7 @@ export const Cell = {
     const { sortable, remoteSort, filters, editRender } = column
     let isRequired = false
     if (editRules) {
-      const columnRules = XEUtils.get(editRules, params.column.property)
+      const columnRules = XEUtils.get(editRules, column.field)
       if (columnRules) {
         isRequired = columnRules.some(rule => rule.required)
       }

package/packages/table/src/columnInfo.js

@@ -133,7 +133,7 @@ export class ColumnInfo {
   }
 
   getKey () {
-    return this.property || (this.type ? `type=${this.type}` : null)
+    return this.field || (this.type ? `type=${this.type}` : null)
   }
 
   update (name, value) {