Error in beforeDestroy hook: “Error: [ElementForm]unpected width “

利用 element 的 form 时候报错：
vue.runtime.esm.js:3065  Error: [ElementForm]unpected width 
    at VueComponent.getLabelWidthIndex (element-ui.common.js:23268:1)
    at VueComponent.deregisterLabelWidth (element-ui.common.js:23281:1)
    at VueComponent.updateLabelWidth (element-ui.common.js:23483:1)
    at VueComponent.beforeDestroy (element-ui.common.js:23510:1)
原因：el-form-item 的 label 组件有个 beforeDestroy 生命同期，el-form 组件的 display: none 获取labelWidth 有问题导致的
办理办法：el-form 上加 v-if，用 el-dialog 的 :visible.sync="dialogVisible" 的话，也加 v-if="dialogVisible"
由于 el-form 标签 label-width 设为 "auto" ，而 el-form-item 会继续这个属性，在某种情况下页面销毁时获取这个 el-form-item 的 label 的 width 为 'auto'，然后用 parseFloat 转换后为 NaN 就报错了。
这个方法是在 element-ui 共通方法里写的 node_modules\element-ui\lib\element-ui.common.js

或是

computedWidth 为 “auto" 或 "" 都会返回 NaN
网上说是由于代码中利用了 v-show 以及 el-form 标签中利用了label-width="auto"，导致离开页面后产生报错
办理方法一：label-width 换成固定值
办理方法二： v-show 换成  v-if
但我的原因是由于利用了 keep-alive 用下面代码可以再现出来
src\router\index.js

1. import Vue from 'vue';
2. import Router from 'vue-router';
3. import Home from '../views/Home.vue';
4. import Layout from '../views/management/Layout.vue';
6. Vue.use(Router);
8. const router = new Router({
9.   mode: 'history',
10.   routes: [
11.     {
12.       path: '/',
13.       name: 'home',
14.       component: Home
15.     },
16.     {
17.       path: '/management',
18.       component: Layout,
19.       children: [
20.         {
21.           path: '/management/audit',
22.           component: () => import("@/views/management/audit/index.vue"),
23.           name: "memberAudit",
24.         },
25.         {
26.           path: '/management/detail',
27.           component: () => import("@/views/management/detail/index.vue"),
28.           name: "memberAudit",
29.         }
30.       ]
31.     }
32.   ]
33. });
35. export default router;

复制代码

src\views\management\Layout.vue

1. <template>
2.   <div class="main">
3.     <el-scrollbar>
4.       <div class="left">
5.         <el-menu
6.           default-active="$route.path"
7.           background-color="#545c64"
8.           text-color="#fff"
9.           router
10.         >
11.           <el-menu-item :router="true" index="/management/audit">
12.             <i class="el-icon-menu"></i>
13.             <span slot="title">审核</span>
14.           </el-menu-item>
15.           <el-menu-item :router="true" index="/management/detail?label=menu">
16.             <i class="el-icon-menu"></i>
17.             <span slot="title">详情</span>
18.           </el-menu-item>
19.           <el-menu-item :router="true" index="/management/about">
20.             <i class="el-icon-menu"></i>
21.             <span slot="title">About</span>
22.           </el-menu-item>
23.         </el-menu>
24.       </div>
25.       <div class="right">
26.         <keep-alive>
27.           <router-view />
28.         </keep-alive>
29.       </div>
30.     </el-scrollbar>
31.   </div>
32. </template>
34. <style lang="scss">
35. .left {
36.   float: left;
37.   width: 200px;
38. }
39. .right {
40.   float: left;
41.   width: 80%;
42. }
43. </style>

复制代码

src\views\management\audit\index.vue

1. <template>
2.   <div class="hello1" style="margin-top: 100px">
3.     audit
4.     <span @click="detail">click</span>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   methods: {
11.     detail() {
12.       this.$router.push("/management/detail?label=测试");
13.     },
14.   },
15. };
16. </script>

复制代码

src\views\management\detail\index.vue

1. <template>
2.   <div>
3.     <el-form
4.       :model="ruleForm"
5.       status-icon
6.       ref="ruleForm"
7.       label-width="auto"
8.       class="demo-ruleForm"
9.     >
10.       <el-form-item label="年龄" prop="age">
11.         <el-input v-model.number="ruleForm.age"></el-input>
12.       </el-form-item>
13.       <el-form-item :label="$route.query.label" prop="name">
14.         <el-input v-model.number="ruleForm.name"></el-input>
15.       </el-form-item>
16.       <el-form-item>
17.         <el-button @click="resetForm()">重置</el-button>
18.       </el-form-item>
19.     </el-form>
20.   </div>
21. </template>
22. <script>
23. export default {
24.   name: "Home",
25.   components: {},
26.   data() {
27.     return {
28.       ruleForm: {
29.         age: "",
30.         name: "",
31.       },
32.     };
33.   },
34.   methods: {
35.     resetForm() {
36.       this.$router.push("/management/audit");
37.     },
38.   },
39. };
40. </script>

复制代码

点击详情

点击重置

再点击 about

报错了，这里留意报错的主要写法
1、src\views\management\Layout.vue
利用 keep-alive
2、src\router\index.js
这里我没设置 about 页面路由，可能如许会触发 VueComponent.beforeDestroy
3、src\views\management\detail\index.vue
el-form-item 必须两个以上，而且其中一个的 label 利用动态值 :label="$route.query.label"
我的这种情况即使设置 label-width 为固定值也不行，由于最后页面消失，获取  label-width 为空
parseFloat(label-width) 为 NaN 就报错了
去掉 keep-alive 就不会报错

去掉后就不会走 'update' 分支，由于页面切换时由于有个 label 是动态赋值的，以是即使页面销毁由于是 keep-alive 且 label 动态值变没了，导致 el-form 以为是 label 值 update ，走的这个方法，而这个时候页面找不到元素， label-width 就是空，以是报错了。
着实是由于 el-form-item 的 label 设为响应式的了，而且在页面销毁时响应式值还更新，可以换一种响应式使它在页面销毁时不更新值
<el-form-item :label="qLabel" prop="name">
  created() {
    this.qLabel = this.$route.query.label;
  },

1. <template>
2.   <div>
3.     <el-form
4.       :model="ruleForm"
5.       status-icon
6.       ref="ruleForm"
7.       label-width="auto"
8.       class="demo-ruleForm"
9.     >
10.       <el-form-item label="年龄" prop="age">
11.         <el-input v-model.number="ruleForm.age"></el-input>
12.       </el-form-item>
13.       <el-form-item :label="qLabel" prop="name">
14.         <el-input v-model.number="ruleForm.name"></el-input>
15.       </el-form-item>
16.       <el-form-item>
17.         <el-button @click="resetForm()">重置</el-button>
18.       </el-form-item>
19.     </el-form>
20.   </div>
21. </template>
22. <script>
23. export default {
24.   name: "Home",
25.   components: {},
26.   created() {
27.     this.qLabel = this.$route.query.label;
28.   },
29.   data() {
30.     return {
31.       qLabel: "",
32.       ruleForm: {
33.         age: "",
34.         name: "",
35.       },
36.     };
37.   },
38.   methods: {
39.     resetForm() {
40.       this.$router.push("/management/audit");
41.     },
42.   },
43. };
44. </script>

复制代码

这么写不会报错，算是完美避开了这个 bug
但是公司的是另一个问题，是用 el-dialog 组件包裹 el-form 也出这个 bug了

1. <el-dialog
2.       title="提示"
3.       :visible.sync="dialogVisible"
4.       width="30%"
5.       :before-close="handleClose"
6.       :destroy-on-close="true"
7.     >
8.       <el-form
9.         :model="ruleForm"
10.         status-icon
11.         ref="ruleForm"
12.         label-width="auto"
13.         class="demo-ruleForm"
14.       >
15.         <el-form-item :span="24" label="年龄" prop="age">
16.           <el-input v-model.number="ruleForm.age"></el-input>
17.         </el-form-item>
18.         <el-form-item>
19.           <el-button @click="resetForm()">重置</el-button>
20.         </el-form-item>
21.       </el-form>
22.     </el-dialog>
25.     resetForm() {
26.       this.dialogVisible = false;
27.       this.$router.push("/management/detail");
28.     },

复制代码

查看源码仔细分析发现，虽然报错在 element-ui.common.js 但着实报错是在源码里 label-wrap.vue
 

1. <script>
3. export default {
4.   props: {
5.     isAutoWidth: Boolean,
6.     updateAll: Boolean
7.   },
9.   inject: ['elForm', 'elFormItem'],
11.   render() {
12.     const slots = this.$slots.default;
13.     if (!slots) return null;
14.     if (this.isAutoWidth) {
15.       const autoLabelWidth = this.elForm.autoLabelWidth;
16.       const style = {};
17.       if (autoLabelWidth && autoLabelWidth !== 'auto') {
18.         const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
19.         if (marginLeft) {
20.           style.marginLeft = marginLeft + 'px';
21.         }
22.       }
23.       return (<div class="el-form-item__label-wrap" style={style}>
24.         { slots }
25.       </div>);
26.     } else {
27.       return slots[0];
28.     }
29.   },
31.   methods: {
32.     getLabelWidth() {
33.       if (this.$el && this.$el.firstElementChild) {
34.         const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
35.         return Math.ceil(parseFloat(computedWidth));
36.       } else {
37.         return 0;
38.       }
39.     },
40.     updateLabelWidth(action = 'update') {
41.       if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
42.         if (action === 'update') {
43.           this.computedWidth = this.getLabelWidth();
44.         } else if (action === 'remove') {
45.           this.elForm.deregisterLabelWidth(this.computedWidth);
46.         }
47.       }
48.     }
49.   },
51.   watch: {
52.     computedWidth(val, oldVal) {
53.       if (this.updateAll) {
54.         this.elForm.registerLabelWidth(val, oldVal);
55.         this.elFormItem.updateComputedLabelWidth(val);
56.       }
57.     }
58.   },
60.   data() {
61.     return {
62.       computedWidth: 0
63.     };
64.   },
66.   mounted() {
67.     this.updateLabelWidth('update');
68.   },
70.   updated() {
71.     this.updateLabelWidth('update');
72.   },
74.   beforeDestroy() {
75.     this.updateLabelWidth('remove');
76.   }
77. };
78. </script>

复制代码

由于 form-item 组件用了 label 组件，而 label 组件是用上面的 label-wrap 包裹的，以是 el-dialog 关闭并跳转到新页面时就调用了 label-wrap beforeDestroy生命周期函数，这个时候由于 el-dialog 是用的 v-show 以是 display 为 none，这个时候获取 label 的 width 
if (this.$el && this.$el.firstElementChild) 这个判定条件是获取 label 标签由于用了 <keep-alive>，以是照旧能找到的，但是window.getComputedStyle(this.$el.firstElementChild).width 获取的值就是 空大概 ’auto'
办理办法 v-show 改为 v-if 就是让 this.$el.firstElementChild 根本查询不到 label 标签，就不会走这个条件分支了，就不会报错了，对功能也没影响。
以是可以在 el-dialog 上加 v-if 和 visible 用一个变量即可，或是在 el-form 上加，或是 el-form-item上加 v-if 但是这种情况得所有 el-form-item 都加上
测试办理了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告