vxe-pc-ui 3.16.0 → 3.16.1

package/lib/table-select/src/table-select.js

@@ -0,0 +1,871 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getRowUniqueId = getRowUniqueId;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _vn = require("../../ui/src/vn");
+var _utils = require("../../ui/src/utils");
+var _log = require("../../ui/src/log");
+var _input = _interopRequireDefault(require("../../input/src/input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('table-select'),
+  errLog = _createComponentLog.errLog;
+function getRowUniqueId() {
+  return _xeUtils.default.uniqueId('row_');
+}
+function createReactData() {
+  return {
+    initialized: false,
+    tableColumns: [],
+    fullOptionList: [],
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    triggerFocusPanel: false,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false
+  };
+}
+function createInternalData() {
+  return {
+    // hpTimeout: undefined,
+    // vpTimeout: undefined,
+    fullRowMaps: {}
+  };
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeTableSelect',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Array],
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().tableSelect.clearable;
+      }
+    },
+    placeholder: {
+      type: String,
+      default: function _default() {
+        return _xeUtils.default.eqNull((0, _ui.getConfig)().tableSelect.placeholder) ? (0, _ui.getI18n)('vxe.base.pleaseSelect') : (0, _ui.getConfig)().tableSelect.placeholder;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    loading: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    multiple: Boolean,
+    className: [String, Function],
+    prefixIcon: String,
+    placement: String,
+    columns: Array,
+    options: Array,
+    optionProps: Object,
+    lazyOptions: Array,
+    zIndex: Number,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().tableSelect.size || (0, _ui.getConfig)().size;
+      }
+    },
+    popupConfig: Object,
+    gridConfig: Object,
+    transfer: {
+      type: Boolean,
+      default: null
+    }
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeTableSelect = this;
+    return {
+      $xeTableSelect: $xeTableSelect
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = createReactData();
+    var gridEvents = {};
+    return Object.assign(Object.assign({}, {}), {
+      xID: xID,
+      reactData: reactData,
+      gridEvents: gridEvents
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var $xeForm = $xeTableSelect.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var $xeForm = $xeTableSelect.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var $xeForm = $xeTableSelect.$xeForm;
+      var $xeTable = $xeTableSelect.$xeTable;
+      var $xeModal = $xeTableSelect.$xeModal;
+      var $xeDrawer = $xeTableSelect.$xeDrawer;
+      var transfer = props.transfer;
+      var popupOpts = $xeTableSelect.computePopupOpts;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().tableSelect.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computePropsOpts: function computePropsOpts() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      return props.optionProps || {};
+    },
+    computeRowOpts: function computeRowOpts() {
+      var $xeTableSelect = this;
+      var gridOpts = $xeTableSelect.computeGridOpts;
+      return Object.assign({}, gridOpts.rowConfig, {
+        isCurrent: true
+      });
+    },
+    computeRowKeyField: function computeRowKeyField() {
+      var $xeTableSelect = this;
+      var rowOpts = $xeTableSelect.computeRowOpts;
+      return rowOpts.keyField || '_X_ROW_KEY';
+    },
+    computeLabelField: function computeLabelField() {
+      var $xeTableSelect = this;
+      var propsOpts = $xeTableSelect.computePropsOpts;
+      return propsOpts.label || 'label';
+    },
+    computeValueField: function computeValueField() {
+      var $xeTableSelect = this;
+      var propsOpts = $xeTableSelect.computePropsOpts;
+      return propsOpts.value || 'value';
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      return Object.assign({}, (0, _ui.getConfig)().tableSelect.popupConfig, props.popupConfig);
+    },
+    computeGridOpts: function computeGridOpts() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      return Object.assign({}, (0, _ui.getConfig)().tableSelect.gridConfig, props.gridConfig, {
+        data: undefined
+      });
+    },
+    computeSelectGridOpts: function computeSelectGridOpts() {
+      var $xeTableSelect = this;
+      var gridOpts = $xeTableSelect.computeGridOpts;
+      var pagerConfig = gridOpts.pagerConfig,
+        proxyConfig = gridOpts.proxyConfig;
+      if (proxyConfig) {
+        var proxyAjax = proxyConfig.ajax;
+        if (proxyAjax && proxyAjax.query) {
+          var newProxyConfig = _xeUtils.default.clone(proxyConfig, true);
+          var ajaxMethods = proxyAjax.query;
+          if (ajaxMethods) {
+            var resConfigs = proxyConfig.response || proxyConfig.props || {};
+            Object.assign(newProxyConfig.ajax, {
+              query: function query(params) {
+                for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                  args[_key - 1] = arguments[_key];
+                }
+                return Promise.resolve(ajaxMethods.apply(void 0, [params].concat(args))).then(function (rest) {
+                  var tableData = [];
+                  if (pagerConfig) {
+                    var resultProp = resConfigs.result;
+                    tableData = (_xeUtils.default.isFunction(resultProp) ? resultProp({
+                      data: rest,
+                      $table: null,
+                      $grid: null,
+                      $gantt: null
+                    }) : _xeUtils.default.get(rest, resultProp || 'result')) || [];
+                  } else {
+                    var listProp = resConfigs.list;
+                    tableData = (listProp ? _xeUtils.default.isFunction(listProp) ? listProp({
+                      data: rest,
+                      $table: null,
+                      $grid: null,
+                      $gantt: null
+                    }) : _xeUtils.default.get(rest, listProp) : rest) || [];
+                  }
+                  $xeTableSelect.cacheDataMap(tableData || []);
+                  return rest;
+                });
+              }
+            });
+          }
+          return Object.assign({}, gridOpts, {
+            proxyConfig: newProxyConfig
+          });
+        }
+      }
+      return gridOpts;
+    },
+    computeSelectLabel: function computeSelectLabel() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      var internalData = $xeTableSelect.internalData;
+      var value = props.value,
+        lazyOptions = props.lazyOptions;
+      var fullOptionList = reactData.fullOptionList;
+      var fullRowMaps = internalData.fullRowMaps;
+      var valueField = $xeTableSelect.computeValueField;
+      var labelField = $xeTableSelect.computeLabelField;
+      if (!fullOptionList) {
+        return '';
+      }
+      return (_xeUtils.default.isArray(value) ? value : [value]).map(function (val) {
+        var cacheItem = fullRowMaps[val];
+        if (cacheItem) {
+          return cacheItem.item[labelField];
+        }
+        if (lazyOptions) {
+          var lazyItem = lazyOptions.find(function (item) {
+            return item[valueField] === val;
+          });
+          if (lazyItem) {
+            return lazyItem[labelField];
+          }
+        }
+        return val;
+      }).join(', ');
+    },
+    computePopupWrapperStyle: function computePopupWrapperStyle() {
+      var $xeTableSelect = this;
+      var popupOpts = $xeTableSelect.computePopupOpts;
+      var height = popupOpts.height,
+        width = popupOpts.width;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeTableSelect = this;
+      $xeTableSelect.$emit(type, (0, _ui.createEvent)(evnt, {
+        $tableSelect: $xeTableSelect
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeTableSelect = this;
+      var _events = $xeTableSelect._events;
+      if (_events && _events.modelValue) {
+        $xeTableSelect.$emit('modelValue', value);
+      } else {
+        $xeTableSelect.$emit('model-value', value);
+      }
+    },
+    getRowid: function getRowid(option) {
+      var $xeTableSelect = this;
+      var nodeKeyField = $xeTableSelect.computeRowKeyField;
+      var rowid = option[nodeKeyField];
+      return rowid ? encodeURIComponent(rowid) : '';
+    },
+    getRowsByValue: function getRowsByValue(modelValue) {
+      var $xeTableSelect = this;
+      var internalData = $xeTableSelect.internalData;
+      var fullRowMaps = internalData.fullRowMaps;
+      var rows = [];
+      var vals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
+      vals.forEach(function (val) {
+        var cacheItem = fullRowMaps[val];
+        if (cacheItem) {
+          rows.push(cacheItem.item);
+        }
+      });
+      return rows;
+    },
+    updateModel: function updateModel(modelValue) {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var multiple = props.multiple;
+      $xeTableSelect.$nextTick(function () {
+        var $grid = $xeTableSelect.$refs.refGrid;
+        if ($grid) {
+          var selectList = $xeTableSelect.getRowsByValue(modelValue);
+          if (selectList.length) {
+            if (multiple) {
+              $grid.setCheckboxRow(selectList, true);
+            } else {
+              $grid.setRadioRow(selectList[0]);
+            }
+          }
+        }
+      });
+    },
+    loadTableColumn: function loadTableColumn(columns) {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      if (!columns || !columns.length) {
+        return;
+      }
+      var multiple = props.multiple;
+      var tableCols = [];
+      var hasRadioCol = false;
+      var hasCheckboxCol = false;
+      columns.forEach(function (column) {
+        if (!hasRadioCol && column.type === 'radio') {
+          hasRadioCol = true;
+        } else if (!hasCheckboxCol && column.type === 'checkbox') {
+          hasCheckboxCol = true;
+        }
+        tableCols.push(column);
+      });
+      if (multiple) {
+        if (!hasCheckboxCol) {
+          tableCols.unshift({
+            type: 'checkbox',
+            width: 70
+          });
+        }
+      } else {
+        if (!hasRadioCol) {
+          tableCols.unshift({
+            type: 'radio',
+            width: 70
+          });
+        }
+      }
+      reactData.tableColumns = tableCols;
+    },
+    cacheDataMap: function cacheDataMap(dataList) {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      var internalData = $xeTableSelect.internalData;
+      var options = props.options;
+      var rowKeyField = $xeTableSelect.computeRowKeyField;
+      var valueField = $xeTableSelect.computeValueField;
+      var gridOpts = $xeTableSelect.computeGridOpts;
+      var treeConfig = gridOpts.treeConfig,
+        pagerConfig = gridOpts.pagerConfig;
+      var rowMaps = {};
+      var keyMaps = {};
+      if (treeConfig) {
+        // x
+      } else {
+        _xeUtils.default.arrayEach(dataList || options || [], function (item, index, items) {
+          var rowid = $xeTableSelect.getRowid(item);
+          if (!rowid) {
+            rowid = getRowUniqueId();
+          }
+          if (keyMaps[rowid]) {
+            errLog('vxe.error.repeatKey', [rowKeyField, rowid]);
+          }
+          keyMaps[rowid] = true;
+          var value = item[valueField];
+          if (rowMaps[value]) {
+            errLog('vxe.error.repeatKey', [valueField, value]);
+          }
+          rowMaps[value] = {
+            item: item,
+            index: index,
+            items: items,
+            parent: null,
+            nodes: []
+          };
+        });
+      }
+      reactData.fullOptionList = dataList || options || [];
+      internalData.fullRowMaps = pagerConfig ? Object.assign({}, internalData.fullRowMaps, rowMaps) : rowMaps;
+      $xeTableSelect.updateModel(props.value);
+    },
+    updateZindex: function updateZindex() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      var popupOpts = $xeTableSelect.computePopupOpts;
+      var customZIndex = popupOpts.zIndex || props.zIndex;
+      if (customZIndex) {
+        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
+      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeTableSelect.$refs.refElem;
+      var panelElem = $xeTableSelect.$refs.refOptionPanel;
+      var btnTransfer = $xeTableSelect.computeBtnTransfer;
+      var popupOpts = $xeTableSelect.computePopupOpts;
+      var handleStyle = function handleStyle() {
+        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          teleportTo: btnTransfer
+        });
+        var panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return $xeTableSelect.$nextTick().then(handleStyle);
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var reactData = $xeTableSelect.reactData;
+      var internalData = $xeTableSelect.internalData;
+      var loading = props.loading;
+      var isDisabled = $xeTableSelect.computeIsDisabled;
+      if (!loading && !isDisabled) {
+        if (internalData.vpTimeout) {
+          clearTimeout(internalData.vpTimeout);
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout);
+        }
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          var btnTransfer = $xeTableSelect.computeBtnTransfer;
+          var panelElem = $xeTableSelect.$refs.refOptionPanel;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        internalData.vpTimeout = setTimeout(function () {
+          reactData.visiblePanel = true;
+          $xeTableSelect.updateModel(props.value);
+          internalData.vpTimeout = undefined;
+          $xeTableSelect.updatePlacement();
+        }, 10);
+        $xeTableSelect.updateZindex();
+        $xeTableSelect.updatePlacement();
+      }
+    },
+    hideOptionPanel: function hideOptionPanel() {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var internalData = $xeTableSelect.internalData;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = setTimeout(function () {
+        reactData.isAniVisible = false;
+      }, 350);
+    },
+    changeEvent: function changeEvent(evnt, selectValue, row) {
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var $xeForm = $xeTableSelect.$xeForm;
+      var formItemInfo = $xeTableSelect.formItemInfo;
+      $xeTableSelect.emitModel(selectValue);
+      if (selectValue !== props.value) {
+        $xeTableSelect.dispatchEvent('change', {
+          value: selectValue,
+          row: row,
+          option: row
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        }
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeTableSelect = this;
+      $xeTableSelect.changeEvent(evnt, selectValue, null);
+      $xeTableSelect.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    clearEvent: function clearEvent(params, evnt) {
+      var $xeTableSelect = this;
+      var $grid = $xeTableSelect.$refs.refGrid;
+      if ($grid) {
+        $grid.clearRadioRow();
+        $grid.clearCheckboxRow();
+      }
+      $xeTableSelect.clearValueEvent(evnt, null);
+      $xeTableSelect.hideOptionPanel();
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeTableSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeTableSelect.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeTableSelect.updatePlacement();
+          } else {
+            $xeTableSelect.hideOptionPanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeTableSelect.computeIsDisabled;
+      if (!isDisabled) {
+        var el = $xeTableSelect.$refs.refElem;
+        var panelElem = $xeTableSelect.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeTableSelect.hideOptionPanel();
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      if (visiblePanel) {
+        $xeTableSelect.hideOptionPanel();
+      }
+      if (isActivated) {
+        reactData.isActivated = false;
+      }
+      if (visiblePanel || isActivated) {
+        var $input = $xeTableSelect.$refs.refInput;
+        if ($input) {
+          $input.blur();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeTableSelect.updatePlacement();
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var isDisabled = $xeTableSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          reactData.triggerFocusPanel = true;
+          $xeTableSelect.showOptionPanel();
+          setTimeout(function () {
+            reactData.triggerFocusPanel = false;
+          }, 150);
+        }
+      }
+      $xeTableSelect.dispatchEvent('focus', {}, evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeTableSelect = this;
+      $xeTableSelect.togglePanelEvent(evnt);
+      $xeTableSelect.dispatchEvent('click', {}, evnt);
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      reactData.isActivated = false;
+      $xeTableSelect.dispatchEvent('blur', {}, evnt);
+    },
+    togglePanelEvent: function togglePanelEvent(params) {
+      var $xeTableSelect = this;
+      var reactData = $xeTableSelect.reactData;
+      var $event = params.$event;
+      $event.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (reactData.visiblePanel) {
+          $xeTableSelect.hideOptionPanel();
+        } else {
+          $xeTableSelect.showOptionPanel();
+        }
+      }
+    },
+    radioChangeEvent: function radioChangeEvent(params) {
+      var $xeTableSelect = this;
+      var $event = params.$event,
+        row = params.row;
+      var valueField = $xeTableSelect.computeValueField;
+      var value = row[valueField];
+      $xeTableSelect.changeEvent($event, value, row);
+      $xeTableSelect.hideOptionPanel();
+    },
+    checkboxChangeEvent: function checkboxChangeEvent(params) {
+      var $xeTableSelect = this;
+      var $grid = params.$grid,
+        $event = params.$event,
+        row = params.row;
+      var valueField = $xeTableSelect.computeValueField;
+      if ($grid) {
+        var checkboxRecords = $grid.getCheckboxRecords();
+        var value = checkboxRecords.map(function (row) {
+          return row[valueField];
+        });
+        $xeTableSelect.changeEvent($event, value, row);
+      }
+    },
+    checkboxAllEvent: function checkboxAllEvent(params) {
+      var $xeTableSelect = this;
+      $xeTableSelect.checkboxChangeEvent(params);
+    },
+    //
+    // Render
+    //
+    renderVN: function renderVN(h) {
+      var VxeTableGridComponent = _ui.VxeUI.getComponent('vxe-grid');
+      var $xeTableSelect = this;
+      var props = $xeTableSelect;
+      var slots = $xeTableSelect.$scopedSlots;
+      var reactData = $xeTableSelect.reactData;
+      var className = props.className,
+        options = props.options,
+        loading = props.loading;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel,
+        tableColumns = reactData.tableColumns;
+      var vSize = $xeTableSelect.computeSize;
+      var isDisabled = $xeTableSelect.computeIsDisabled;
+      var selectLabel = $xeTableSelect.computeSelectLabel;
+      var btnTransfer = $xeTableSelect.computeBtnTransfer;
+      var formReadonly = $xeTableSelect.computeFormReadonly;
+      var popupOpts = $xeTableSelect.computePopupOpts;
+      var selectGridOpts = $xeTableSelect.computeSelectGridOpts;
+      var rowOpts = $xeTableSelect.computeRowOpts;
+      var popupWrapperStyle = $xeTableSelect.computePopupWrapperStyle;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
+      var prefixSlot = slots.prefix;
+      var ppClassName = popupOpts.className;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-table-select--readonly', className]
+        }, [h('span', {
+          class: 'vxe-table-select-label'
+        }, selectLabel)]);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-table-select', className ? _xeUtils.default.isFunction(className) ? className({
+          $tableSelect: $xeTableSelect
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--loading', loading), 'is--active', isActivated)]
+      }, [h(_input.default, {
+        ref: 'refInput',
+        props: {
+          clearable: props.clearable,
+          placeholder: props.placeholder,
+          editable: false,
+          disabled: isDisabled,
+          type: 'text',
+          prefixIcon: props.prefixIcon,
+          suffixIcon: loading ? (0, _ui.getIcon)().TABLE_SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().TABLE_SELECT_OPEN : (0, _ui.getIcon)().TABLE_SELECT_CLOSE,
+          value: loading ? (0, _ui.getI18n)('vxe.select.loadingText') : selectLabel
+        },
+        on: {
+          clear: $xeTableSelect.clearEvent,
+          click: $xeTableSelect.clickEvent,
+          focus: $xeTableSelect.focusEvent,
+          blur: $xeTableSelect.blurEvent,
+          'suffix-click': $xeTableSelect.togglePanelEvent
+        },
+        scopedSlots: prefixSlot ? {
+          prefix: function prefix() {
+            return prefixSlot({});
+          }
+        } : {}
+      }), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-table-select--panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
+          $tableSelect: $xeTableSelect
+        }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', !loading && isAniVisible), 'ani--enter', !loading && visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, initialized ? [h('div', {
+        class: 'vxe-table-select--panel-wrapper'
+      }, [headerSlot ? h('div', {
+        class: 'vxe-table-select--panel-header'
+      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeTableSelect), h('div', {
+        class: 'vxe-table-select--panel-body'
+      }, [h('div', {
+        ref: 'refGridWrapper',
+        class: 'vxe-table-select-grid--wrapper',
+        style: popupWrapperStyle
+      }, [VxeTableGridComponent ? h(VxeTableGridComponent, {
+        ref: 'refGrid',
+        class: 'vxe-table-select--grid',
+        props: Object.assign(Object.assign({}, selectGridOpts), {
+          rowConfig: rowOpts,
+          data: options,
+          columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
+          height: '100%',
+          autoResize: true
+        }),
+        on: Object.assign(Object.assign({}, $xeTableSelect.gridEvents), {
+          'radio-change': $xeTableSelect.radioChangeEvent,
+          'checkbox-change': $xeTableSelect.checkboxChangeEvent,
+          'checkbox-all': $xeTableSelect.checkboxAllEvent
+        }),
+        scopedSlots: Object.assign({}, slots, {
+          header: undefined,
+          footer: undefined,
+          prefixSlot: undefined
+        })
+      }) : (0, _ui.renderEmptyElement)($xeTableSelect)])]), footerSlot ? h('div', {
+        class: 'vxe-table-select--panel-footer'
+      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeTableSelect)])] : [])]);
+    }
+  },
+  watch: {
+    options: function options() {
+      var $xeTableSelect = this;
+      $xeTableSelect.cacheDataMap();
+    },
+    columns: function columns(val) {
+      var $xeTableSelect = this;
+      $xeTableSelect.loadTableColumn(val);
+    },
+    value: function value(val) {
+      var $xeTableSelect = this;
+      $xeTableSelect.updateModel(val);
+    }
+  },
+  created: function created() {
+    var $xeTableSelect = this;
+    var props = $xeTableSelect;
+    $xeTableSelect.internalData = createInternalData();
+    var gridEventKeys = ['form-submit', 'form-reset', 'form-collapse', 'page-change'];
+    var gridEvents = $xeTableSelect.gridEvents;
+    gridEventKeys.forEach(function (name) {
+      gridEvents[(0, _vn.getOnName)(name)] = function (params) {
+        $xeTableSelect.dispatchEvent(name, params, params.$event);
+      };
+    });
+    $xeTableSelect.loadTableColumn(props.columns);
+    $xeTableSelect.cacheDataMap();
+  },
+  mounted: function mounted() {
+    var $xeTableSelect = this;
+    var props = $xeTableSelect;
+    var reactData = $xeTableSelect.reactData;
+    var VxeTableGridComponent = _ui.VxeUI.getComponent('vxe-grid');
+    $xeTableSelect.$nextTick(function () {
+      if (!VxeTableGridComponent) {
+        errLog('vxe.error.reqComp', ['vxe-grid']);
+      }
+    });
+    var gridConfig = props.gridConfig;
+    if (gridConfig && gridConfig.proxyConfig) {
+      if (gridConfig.proxyConfig.autoLoad !== false) {
+        reactData.initialized = true;
+      }
+    }
+    _ui.globalEvents.on($xeTableSelect, 'mousewheel', $xeTableSelect.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeTableSelect, 'mousedown', $xeTableSelect.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeTableSelect, 'blur', $xeTableSelect.handleGlobalBlurEvent);
+    _ui.globalEvents.on($xeTableSelect, 'resize', $xeTableSelect.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeTableSelect = this;
+    var reactData = $xeTableSelect.reactData;
+    var internalData = $xeTableSelect.internalData;
+    var panelElem = $xeTableSelect.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeTableSelect, 'mousewheel');
+    _ui.globalEvents.off($xeTableSelect, 'mousedown');
+    _ui.globalEvents.off($xeTableSelect, 'blur');
+    _ui.globalEvents.off($xeTableSelect, 'resize');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */