version 1.0

Author: bestGYH

package-lock.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^1.3.13",
+    "babel-plugin-import": "^1.12.0",
     "core-js": "^2.6.5",
     "vue": "^2.6.10"
   },

package.json

@@ -1,28 +1,24 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="demo">
+    <Editablecell/>
   </div>
+
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Editablecell from './view/editablecell.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    Editablecell
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  .demo {
+    padding: 24px;
+  }
+
 </style>

src/App.vue

@@ -0,0 +1,206 @@
+/**
+* @Description:
+* @Author: yanhui.gao
+* @Date: 2019/7/24  14:45
+*/
+<template>
+  <div class="editable-cell">
+    <div v-if="editable" :class="['editable-cell-input-wrapper',singleEdit ? 'single-edit' : '']">
+      <a-form :form="form">
+        <a-form-item :colon="false" class="no-validate">
+          <a-input v-if="showFormItem('input')" v-decorator="decorator" :placeholder="placeholder" @change="handleChange"  autocomplete="off" />
+          <a-input-number :min="min" :max="max" v-if="showFormItem('number')" v-decorator="decorator" :placeholder="placeholder"  />
+          <a-switch v-if="showFormItem('switch')" v-decorator="decorator" :placeholder="placeholder" @change="handleChange" :value="value"/>
+          <a-date-picker :showTime="showTime" :format="format" v-if="showFormItem('datePicker')" v-decorator="decorator" :placeholder="placeholder" />
+          <a-range-picker :showTime="showTime" :format="format" v-if="showFormItem('rangePicker')" v-decorator="decorator" :placeholder="placeholder" />
+          <a-month-picker :showTime="showTime" :format="format" v-if="showFormItem('monthPicker')" v-decorator="decorator" :placeholder="placeholder" />
+          <a-select v-if="showFormItem('select')" v-decorator="decorator" :placeholder="placeholder" @change="handleChange" >
+            <slot/>
+          </a-select>
+          <a-auto-complete
+            v-if="showFormItem('autoComplete')" v-decorator="decorator" :placeholder="placeholder"   @search="handleSearch" optionLabelProp="text" :disabled="notEdit"
+          >
+            <template slot="dataSource">
+              <slot/>
+            </template>
+          </a-auto-complete>
+        </a-form-item>
+      </a-form>
+      <a-icon v-if="singleEdit" type="check" class="editable-cell-icon-check" @click="check(true)" />
+    </div>
+    <div v-else :class="['editable-cell-text-wrapper',singleEdit ? 'single-edit' : '']">
+      {{ getText || ' ' }}
+      <a-icon v-if="singleEdit" type="edit" class="editable-cell-icon" @click="edit" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      editable: this.defaultEditable,
+    };
+  },
+  props: {
+    // 非编辑模式下，显示文本
+    text: {
+      type: [Number, String, Array, Object],
+    },
+    // 编辑模式下组件值
+    value: {
+      message: { type: [Number, String, Array, Object], default: '' },
+    },
+    // 表单组件类型
+    formType: {
+      validator(value) {
+        return ['input', 'number', 'switch', 'datePicker', 'rangePicker', 'select', 'monthPicker', 'autoComplete'].indexOf(value) !== -1;
+      },
+      default: 'input',
+    },
+    // 表单校验
+    decoratorOptions: {
+      type: [Array, Object],
+    },
+    // number 类型输入框属性
+    min: { type: Number, default: -Infinity },
+    max: { type: Number, default: Infinity },
+    // 表单默认提示
+    placeholder: { type: String, default: '请输入' },
+    // 支持单元格单个编辑
+    singleEdit: { type: Boolean, default: false },
+    // 默认编辑模式
+    defaultEditable: { type: Boolean, default: false },
+    // 是否自动保存
+    autoSave: { type: Boolean, default: false },
+    // 日期组件设置
+    format: { type: String, default: 'YYYY-MM-DD' },
+    showTime: { type: [Boolean, Object], default: false },
+    // 是否可编辑
+    notEdit: { type: Boolean, default: false },
+  },
+  computed: {
+    // 格式化文本
+    getText() {
+      if (typeof this.text === 'function') {
+        return this.text();
+      }
+      return this.text;
+    },
+    // 根据属性，合成表单验证装饰器
+    decorator() {
+      if (this.decoratorOptions) {
+        const newOptions = JSON.parse(JSON.stringify(this.decoratorOptions));
+        newOptions.initialValue = this.value;
+        const itemDecorator = ['formName'];
+        itemDecorator.push(newOptions);
+        return itemDecorator;
+      }
+      const itemDecorator = ['formName'];
+      const options = {};
+      options.initialValue = this.value;
+      itemDecorator.push(options);
+      return itemDecorator;
+    },
+  },
+  watch: {
+    // 监视父页面是否可编辑属性，及时响应控件内切换
+    defaultEditable(value) {
+      this.editable = value;
+    },
+  },
+  methods: {
+    // 判断表单是否
+    showFormItem(formType) {
+      return this.formType === formType;
+    },
+    // 表单change事件
+    handleChange(value) {
+      if (this.autoSave) {
+        if (this.formType === 'input') {
+          this.$emit('valueChange', value.target.value);
+        } else if (this.formType === 'select') {
+          this.$emit('valueChange', value);
+        }
+      }
+      // this.check(false);
+    },
+    // auto-complete 搜索
+    handleSearch(value) {
+      this.$emit('autoCompleteSearch', value);
+    },
+    // 表单校验
+    validate() {
+      const result = {
+        success: false,
+        value: '',
+      };
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          result.success = true;
+          result.value = values.formName;
+        }
+      });
+      return result;
+    },
+    // 表单赋值
+    setValue(value) {
+      this.form.setFieldsValue({
+        formName: value,
+      });
+    },
+    // 点击"对号"图标，校验通过后触发通知父组件
+    check(flag) {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (flag) {
+            // 切换到只读模式
+            this.editable = false;
+          }
+          this.$emit('valueChange', values.formName);
+        }
+      });
+    },
+    // 切换到编辑模式
+    edit() {
+      this.editable = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .editable-cell {
+    position: relative;
+    margin-top: -9px;
+    margin-bottom: -9px;
+  }
+
+  .editable-cell:hover .editable-cell-icon {
+    display: inline-block;
+  }
+  .editable-cell-input-wrapper.single-edit,
+  .editable-cell-text-wrapper.single-edit {
+    padding-right: 24px;
+  }
+
+  .editable-cell-icon,
+  .editable-cell-icon-check {
+    position: absolute;
+    right: 0;
+    width: 20px;
+    cursor: pointer;
+  }
+  .editable-cell-icon {
+    top: 3px;
+    line-height: 18px;
+    display: none;
+  }
+  .editable-cell-icon-check {
+    top: 12px;
+  }
+
+  .no-validate {
+    margin-bottom: 0;
+  }
+</style>

src/components/EditableCell/cell.vue

@@ -0,0 +1,5 @@
+import EditableCell from './cell.vue';
+
+export { EditableCell };
+
+export default EditableCell;

src/components/EditableCell/index.js

@@ -1,7 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Antd from 'ant-design-vue'
 
-Vue.config.productionTip = false
+/**
+ * css 区域
+ */
+import 'ant-design-vue/dist/antd.css'
+
+Vue.use(Antd)
 
 new Vue({
   render: h => h(App),