添加不实时检查的input

DaoCloud · Oct 10, 2018 · 1b09f08 · 1b09f08
1 parent 78b47f8
commit 1b09f08
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 21 deletions.
diff --git a/examples/view/demos/editable-table/demo-1.vue b/examples/view/demos/editable-table/demo-1.vue
@@ -1,13 +1,27 @@
 <template>
   <div>
-    <dao-editable-table 
-      :config="config" 
-      v-model="model" 
-      @valid="validChange">
+    <h1>实时验证</h1>
+    <dao-editable-table :config="config" v-model="model" @valid="validChange1"></dao-editable-table>
+    <button class="dao-btn blue" @click="changeHeader">添加一列</button>
+    <h1>非实时验证</h1>
+    <ul class="red" v-for="th in validationMessage" :key="th">
+        <li>{{th}}</li>
+      </ul>
+    <dao-editable-table
+      :instantCheck="false"
+      ref="EditableTable"
+      :config="config"
+      v-model="model"
+      @valid="validChange2"
+      @validation="validation">
+      <template>
+        <dao-tooltip v-for="th in config.header" :key="th" :slot="th" content="haha" placement="top">
+          <svg class="icon"><use xlink:href="#icon_info-line"></use></svg>
+        </dao-tooltip>
+      </template>
     </dao-editable-table>
-    <button 
-      class="dao-btn blue" 
-      @click="changeHeader">添加一列</button>
+    <button class="dao-btn blue" @click="changeHeader">添加一列</button>
+    <button class="dao-btn blue" @click="onValidate">触发验证</button>
   </div>
 </template>
 <script>
@@ -100,11 +114,15 @@ export default {
         type: '字符串',
         placeholder: '此列不应显示，显示说明有 bug',
       }],
+      validationMessage: [],
     };
   },
   methods: {
-    validChange(val) {
-      console.log('验证结果改变', val);
+    validChange1(val) {
+      console.log('验证结果改变1', val);
+    },
+    validChange2(val) {
+      console.log('验证结果改变2', val);
     },
     changeHeader() {
       this.config.header.push('最大值');
@@ -114,6 +132,12 @@ export default {
         default: 50,
       });
     },
+    onValidate() {
+      this.$refs.EditableTable.validate();
+    },
+    validation(value) {
+      this.validationMessage = value;
+    },
   },
   watch: {
     model(newModel) {

diff --git a/pre-commit b/pre-commit
diff --git a/src/components/dao-editable-table/dao-editable-table.html b/src/components/dao-editable-table/dao-editable-table.html
@@ -1,26 +1,27 @@
 <div class="dao-editable-table">
   <table class="dao-table flexrow" v-if="rows.length > 0">
-    <thead>
-      <tr>
-        <th v-for="th in header">{{ th.text }}</th>
+    <thead v-if="!noThead">
+      <tr>  
+        <th v-for="th in header">{{th.text}}
+          <slot :name="th.text"></slot>
+        </th>
         <th class="det-edit-col">{{ operationText }}</th>
       </tr>
     </thead>
     <tbody>
       <tr class="det-tr" v-for="(row, index) in rows" :class="{activate: index === activatedRow}">
         <td v-for="td in row" class="det-td">
-          <dao-input class="det-input"
+            <dao-input class="det-input"
             type="text"
             v-if="td.type === 'input'"
             v-model="td.value"
             size="sm"
             :block="true"
             no-border
-            icon-inside
+            :icon-inside="instantCheck"
             :placeholder="td.placeholder"
-            :message="typeof(td.valid) === 'string' ? td.valid : ''"
+            :message="typeof(td.valid) === 'string' && instantCheck ? td.valid : ''"
             :status="typeof(td.valid) === 'string' ? 'error' : ''"
-            :show-tooltip-only-hover="true"
             @focus="focusRow(index)"
             @blur="onBlur">
           </dao-input>
@@ -38,7 +39,7 @@
             v-model="td.value"
             size="sm"
             @change="validteAndUpdate()">
-            <dao-option v-for="option in td.options" :value="getOptionProp(option, 'value')" :label="getOptionProp(option, 'label')" :key="option.value || option"></dao-option>
+            <dao-option v-for="option in td.options" :value="option.value || option" :label="option.label || option" :key="option.value || option"></dao-option>
           </dao-select>
           <span v-if="td.type === 'text'">{{ td.value }}</span>
         </td>

diff --git a/src/components/dao-editable-table/dao-editable-table.js b/src/components/dao-editable-table/dao-editable-table.js
@@ -5,7 +5,7 @@ import {
   _forEach,
   _some,
   _isString,
-  _isObject,
+  _uniq,
 } from '../../utils/assist';
 
 export default {
@@ -27,6 +27,14 @@ export default {
       type: String,
       default: '添加',
     },
+    noThead: {
+      type: Boolean,
+      default: false,
+    },
+    instantCheck: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -115,14 +123,18 @@ export default {
     // 添加一行
     addRow() {
       this.rows.push(this.generateRow());
-      this.validate();
+      if (this.instantCheck) {
+        this.validate();
+      }
       this.updateModel();
     },
     // 删除一行
     removeRow(row) {
       const index = this.rows.indexOf(row);
       this.rows.splice(index, 1);
-      this.validate();
+      if (this.instantCheck) {
+        this.validate();
+      }
       this.updateModel();
     },
     focusRow(rowIndex) {
@@ -137,13 +149,19 @@ export default {
     },
     // 验证数据
     validate() {
+      this.rowsValid = [];
       _forEach(this.rows, (row) => {
         _forEach(row, (td) => {
           if (td.type === 'input' && td.validate) {
             this.$set(td, 'valid', td.validate(this.rowToModel(row), this.model));
+            if (td.valid !== true) {
+              this.rowsValid.push(td.valid);
+            }
           }
         });
       });
+      this.$emit('validation', _uniq(this.rowsValid));
+      this.updateModel();
     },
     // 更新 model
     updateModel() {
@@ -161,7 +179,9 @@ export default {
       }
     },
     validteAndUpdate() {
-      this.validate();
+      if (this.instantCheck) {
+        this.validate();
+      }
       this.updateModel();
     },
     getOptionProp(option, prop) {

diff --git a/src/utils/assist.js b/src/utils/assist.js
@@ -22,3 +22,5 @@ export { default as _toString } from 'lodash/toString';
 export { default as _findIndex } from 'lodash/findIndex';
 export { default as _merge } from 'lodash/merge';
 export { default as _uniqBy } from 'lodash/uniqBy';
+export { default as _uniq } from 'lodash/uniq';
+