fixed m-table中编辑因为值是空而没有设置initValue的bug

add 框架国际化为中文

Author: crazyJiaLin

src/App.vue

@@ -1,14 +1,26 @@
 <template>
-  <div id="app">
-    <!-- <img src="./assets/logo.png"> -->
-    <router-view/>
-  </div>
+  <a-locale-provider :locale="locale">
+    <div id="app">
+      <!-- <img src="./assets/logo.png"> -->
+      <router-view/>
+    </div>
+  </a-locale-provider>
 </template>
 
 <script>
-export default {
-  name: 'App'
-}
+  import {LocaleProvider} from 'ant-design-vue'
+  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
+  export default {
+    name: 'App',
+    components: {
+      ALocaleProvider: LocaleProvider
+    },
+    data() {
+      return {
+        locale: zhCN,
+      }
+    }
+  }
 </script>
 
 <style>

src/components/m-table/m-edit/m-edit.vue

@@ -5,6 +5,7 @@
       :width="options.width ? options.width : 720"
       @close="onClose"
       :visible="visible"
+      destroyOnClose
       wrapClassName="sys-menu-create-wrap">
       <!--      <m-form :options="options.form" @submit="handleSubmit"></m-form>-->
       <a-form :form="form" @submit="handleSubmit">
@@ -44,10 +45,11 @@
         // 在这里将record中的值合并到form中去
         let res = [];
         for(let i=0; i<this.options.form.children.length; i++) {
-          let item = this.options.form.children[i];
-          let value = this.record[item.id];
+          let item = this.options.form.children[i]; // 从options的列表中获取当前操作的item
+          let value = this.record[item.id];         // 从record中获取当前item id的值
           // console.log('找到',item.id, '值为',value)
-          if(value) {
+          // 这里不应当有非空判断，因为在value值为空的时候也不应该是上一次的值
+          // if(value) {
             let tempDecorator = item.attribute.decorator;
             if(item.attribute.initialValueRender){
               // 如果存在初始化render，则按照render中的进行
@@ -57,7 +59,7 @@
               tempDecorator.initialValue = value;
             }
             item.attribute.decorator = tempDecorator;
-          }
+          // }
           res.push(item)
         }
         // console.log('通过editItem对decorator设置initVal', res)
@@ -100,7 +102,7 @@
                 message: '更新成功'
               })
               // 置空表单，向父组件提交动作，更新表格
-              // this.form.resetFields(); --- 编辑不用置空
+              // this.form.resetFields();
               this.$emit('close', 'updated');
             }
           }).catch(err => {
@@ -111,6 +113,8 @@
         });
       },
       onClose() {
+        // this.form.resetFields();
+        // console.log('on edit close')
         this.$emit('close');
       },
       handleSubmitEvent (value) {

src/components/m-table/m-table.vue

@@ -180,7 +180,6 @@
       renderOptions (text, record, index) {
         // 通过text和record查出当前渲染的是哪一列
         let key = this.getKeyInRecord(text, record)
-        // console.log(key)
         if(!key) return [];
 
         // 通过key值去columns里边找到对应的render方法
@@ -189,13 +188,15 @@
         return res ? res : [];
       },
       getKeyInRecord (text, record) {
+        // console.log('getKeyInRecord里text和record', text, typeof(text), record)
         for(let key in record) {
           if(typeof(text) === 'object') {
             if(JSON.stringify(text) == JSON.stringify(record[key])) {
               return key;
             }
           }else{
             if(text === record[key]){
+              // console.log(key)
               return key;
             }
           }

src/pages/view-template/test-data/query-table布局.js

@@ -106,7 +106,11 @@ export default [
     type: 'Table',
     // 每行数据的key值，由函数渲染，组件内部会执行eval，所以请书写正确可执行的函数
     rowKeys: 'record => record.record_id',
-    // pagination: {}, //可以不用传或者false
+    //可以不用传或者false
+    pagination: {
+      showSizeChanger : true,
+      showQuickJumper: true
+    },
     attribute: {
       bordered: true,
       size : 'small',
@@ -241,6 +245,19 @@ export default [
           }`
         }
       },
+      {
+        "title": "邮箱",
+        "dataIndex": "email",
+        "align": "roles",
+        "width": "200px",
+        "scopedSlots": {
+          "customRender": "template",
+          "render": `(text, record, index) => {
+              // console.log('配置文件中的render方法', text, typeof(text), record)
+              return [{id:'tag'+index,type:'tag',text: text ? text : 2,attribute:{color: 'geekblue'}}];
+            }`
+        }
+      },
       // {
       //   title: '邮箱',
       //   dataIndex: 'email',
@@ -253,16 +270,16 @@ export default [
       //   align: 'center',
       //   width: '200px',
       // },
-      {
-        title: '创建时间',
-        dataIndex: 'created_at',
-        align: 'center',
-        width: '220px',
-        customRender: `(text, record, index)=>{
-          return text.split('T')[0]+ ' ' + text.split('T')[1].split('+')[0];
-        }`
-        // scopedSlots: {customRender: 'created'},
-      },
+      // {
+      //   title: '创建时间',
+      //   dataIndex: 'created_at',
+      //   align: 'center',
+      //   width: '220px',
+      //   customRender: `(text, record, index)=>{
+      //     return text.split('T')[0]+ ' ' + text.split('T')[1].split('+')[0];
+      //   }`
+      //   // scopedSlots: {customRender: 'created'},
+      // },
       {
         title: '操作',
         dataIndex: 'record_id',