增加 radio、checkbox

x-extends · Feb 14, 2020 · ea3d940 · ea3d940
1 parent 4543963
commit ea3d940
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ VXETable.use(VXETablePluginElement)
 
 | 属性 | 描述 | 类型 | 可选值 | 默认值 |
 |------|------|-----|-----|-----|
-| name | 支持的渲染组件 | String | ElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider | — |
+| name | 支持的渲染组件 | String | ElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider, ElRadio, ElCheckbox | — |
 | attrs | 渲染组件附加属性，参数请查看被渲染的 Component attrs | Object | — | {} |
 | props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |
 | options | 只对 name=ElSelect 有效，下拉组件选项列表 | Array | — | [] |

diff --git a/dist/index.common.js b/dist/index.common.js
diff --git a/dist/index.js b/dist/index.js
@@ -471,6 +471,40 @@
       return valueMethod(params.column[renderProperty], params);
     };
   }
+
+  function createFormItemRadioAndCheckboxRender() {
+    return function (h, renderOpts, params, context) {
+      var name = renderOpts.name,
+          options = renderOpts.options,
+          _renderOpts$optionPro2 = renderOpts.optionProps,
+          optionProps = _renderOpts$optionPro2 === void 0 ? {} : _renderOpts$optionPro2;
+      var data = params.data,
+          property = params.property;
+      var attrs = renderOpts.attrs;
+      var props = getFormProps(context, renderOpts);
+      var labelProp = optionProps.label || 'label';
+      var valueProp = optionProps.value || 'value';
+      var disabledProp = optionProps.disabled || 'disabled';
+      return [h("".concat(name, "Group"), {
+        props: props,
+        attrs: attrs,
+        model: {
+          value: _xeUtils["default"].get(data, property),
+          callback: function callback(cellValue) {
+            _xeUtils["default"].set(data, property, cellValue);
+          }
+        },
+        on: getFormEvents(renderOpts, params, context)
+      }, options.map(function (option) {
+        return h(name, {
+          props: {
+            label: option[valueProp],
+            disabled: option[disabledProp]
+          }
+        }, option[labelProp]);
+      }))];
+    };
+  }
   /**
    * 渲染函数
    */
@@ -505,8 +539,8 @@
       renderEdit: function renderEdit(h, renderOpts, params) {
         var options = renderOpts.options,
             optionGroups = renderOpts.optionGroups,
-            _renderOpts$optionPro2 = renderOpts.optionProps,
-            optionProps = _renderOpts$optionPro2 === void 0 ? {} : _renderOpts$optionPro2,
+            _renderOpts$optionPro3 = renderOpts.optionProps,
+            optionProps = _renderOpts$optionPro3 === void 0 ? {} : _renderOpts$optionPro3,
             _renderOpts$optionGro2 = renderOpts.optionGroupProps,
             optionGroupProps = _renderOpts$optionGro2 === void 0 ? {} : _renderOpts$optionGro2;
         var row = params.row,
@@ -555,8 +589,8 @@
       renderFilter: function renderFilter(h, renderOpts, params, context) {
         var options = renderOpts.options,
             optionGroups = renderOpts.optionGroups,
-            _renderOpts$optionPro3 = renderOpts.optionProps,
-            optionProps = _renderOpts$optionPro3 === void 0 ? {} : _renderOpts$optionPro3,
+            _renderOpts$optionPro4 = renderOpts.optionProps,
+            optionProps = _renderOpts$optionPro4 === void 0 ? {} : _renderOpts$optionPro4,
             _renderOpts$optionGro3 = renderOpts.optionGroupProps,
             optionGroupProps = _renderOpts$optionGro3 === void 0 ? {} : _renderOpts$optionGro3;
         var column = params.column;
@@ -649,8 +683,8 @@
       renderItem: function renderItem(h, renderOpts, params, context) {
         var options = renderOpts.options,
             optionGroups = renderOpts.optionGroups,
-            _renderOpts$optionPro4 = renderOpts.optionProps,
-            optionProps = _renderOpts$optionPro4 === void 0 ? {} : _renderOpts$optionPro4,
+            _renderOpts$optionPro5 = renderOpts.optionProps,
+            optionProps = _renderOpts$optionPro5 === void 0 ? {} : _renderOpts$optionPro5,
             _renderOpts$optionGro4 = renderOpts.optionGroupProps,
             optionGroupProps = _renderOpts$optionGro4 === void 0 ? {} : _renderOpts$optionGro4;
         var data = params.data,
@@ -804,6 +838,12 @@
       renderFilter: createFilterRender(),
       filterMethod: defaultFilterMethod,
       renderItem: createFormItemRender()
+    },
+    ElRadio: {
+      renderItem: createFormItemRadioAndCheckboxRender()
+    },
+    ElCheckbox: {
+      renderItem: createFormItemRadioAndCheckboxRender()
     }
   };
   /**

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/index.ts b/index.ts
@@ -334,6 +334,38 @@ function createExportMethod (valueMethod: Function, isEdit?: boolean) {
   }
 }
 
+function createFormItemRadioAndCheckboxRender () {
+  return function (h: Function, renderOpts: any, params: any, context: any) {
+    let { name, options, optionProps = {} } = renderOpts
+    let { data, property } = params
+    let { attrs } = renderOpts
+    let props: any = getFormProps(context, renderOpts)
+    let labelProp: string = optionProps.label || 'label'
+    let valueProp: string = optionProps.value || 'value'
+    let disabledProp: string = optionProps.disabled || 'disabled'
+    return [
+      h(`${name}Group`, {
+        props,
+        attrs,
+        model: {
+          value: XEUtils.get(data, property),
+          callback (cellValue: any) {
+            XEUtils.set(data, property, cellValue)
+          }
+        },
+        on: getFormEvents(renderOpts, params, context)
+      }, options.map((option: any) => {
+        return h(name, {
+          props: {
+            label: option[valueProp],
+            disabled: option[disabledProp]
+          }
+        }, option[labelProp])
+      }))
+    ]
+  }
+}
+
 /**
  * 渲染函数
  */
@@ -623,6 +655,12 @@ const renderMap = {
     renderFilter: createFilterRender(),
     filterMethod: defaultFilterMethod,
     renderItem: createFormItemRender()
+  },
+  ElRadio: {
+    renderItem: createFormItemRadioAndCheckboxRender()
+  },
+  ElCheckbox: {
+    renderItem: createFormItemRadioAndCheckboxRender()
   }
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table-plugin-element",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "基于 vxe-table 表格的适配插件，用于兼容 element-ui 组件库",
   "scripts": {
     "lib": "gulp build"