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

吹水，可忽略

当我尝试吧el-form中labelWidth设为auto时，刷新页面获取到了上面的错误

百思不得其解，我貌似没有在beforeDestroy进行操作，为何会报这个错误

果断各种百度,Google,无解之下，到github中查看element，是否有前辈提出过这

个问题,还真有哈

大致错误是当组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度。（大佬勿喷我哈，表述欠缺）

正常单页面操作可能不会出现这个问题，由于我是运用在tabs页中页面刷新时出现了这个问题（即通过tabs页达到多页面应用）

正文在这

找到了问题所在就可以对症下药了

可以吧v-show的地方改为v-if，或是吧labelWidth设为固定

但是上面2种操作，并不适用于我当前项目环境中

我的解决方法是，投机取巧

即根据字体个数设为动态labelWidth大小

定义数据源

data(){
    return {
        labelWidth:""
    }
}

mounted跟update中计算label宽度

如每个字体设为18px

methods:{
    setLabelWidth() {
      let len = 0;
      for (const i of this.datas) {
        if (i.label) {
          i.label.length > len && (len = i.label.length);
        }
      }
      this.labelWidth = len * 18 + "px";
    }
},
mounted() {
    this.setLabelWidth();
},
updated() {
    this.setLabelWidth();
}    
    

this.datas为我封装中对应form数据格式为

 datas: [
        {
          label: "张三",
          XX:XXX
        },
        {
          label: "李四",
          XX:XXX
        },
        {
          label: "王二麻子",
          XX:XXX
        }
]

以上代码都是无关紧要的，主要是解决问题的思路（投机取巧哈）

最后放上我简陋的封装

<template>
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      :size="formSize"
      :ref="refName"
      :disabled="disabled"
      :label-width="labelWidth"
    >
      <el-row>
        <el-col v-for="(item, i) in datas" :key="i" :span="item.span || span" :class="item.class">
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-show="item.show!=undefined?item.show:true"
          >
            <!-- 按钮 -->
            <el-button
              v-if="item.type == 'btn'"
              :type="item.whatType"
              :style="{
                padding: '10px 32px',
                'margin-left': item.width || 'auto'
              }"
              v-show="item.show!=undefined?item.show:true"
              @click="btnCK(item.ck)"
            >{{ item.title }}</el-button>
            <!-- 单选按钮 -->
            <el-radio-group v-else-if="item.type == 'radio'" v-model="formData[item.prop]">
              <el-radio v-for="(v, k) in item.radios" :key="k" :label="v.value">{{ v.label }}</el-radio>
            </el-radio-group>
            <!-- 多选按钮 -->
            <el-checkbox
              v-else-if="item.type == 'checkbox'"
              v-model="formData[item.prop]"
            >{{item.title}}</el-checkbox>
            <!-- 空白 -->
            <el-input v-else-if="item.type == 'empty'" style="visibility:hidden;"></el-input>
            <!-- 下拉框 -->
            <el-select
              v-else-if="item.type == 'select'"
              v-model="formData[item.prop]"
              clearable
              filterable
              :remote="item.longRange"
              :remote-method="(query)=>{remoteMethod(query,item.longRangeCk)}"
              :loading="item.loading"
              :ref="item.prop"
              style="width: 100%;"
              :placeholder="placeholder||(item.placeholder|| '请选择' + item.label)"
              @change="changeSel($event, item.ck,selectList(item.selectName,item.selectData,item.prop),item.mult)"
              :disabled="item.disabled"
              :multiple="item.multiple"
              @clear="clear(item.clear)"
              @keyup.enter.native="$emit('enterTrigger')"
            >
              <el-option
                v-for="(v, index) in selectList(
                    item.selectName,
                    item.selectData,
                    item.prop
                  )"
                :key="index"
                :label="v.dataValue"
                :value="v.dataKey"
                :disabled="v.disabled"
              ></el-option>
            </el-select>
            <!-- 日期选择器 -->
            <el-date-picker
              v-else-if="item.type == 'date'"
              v-model="formData[item.prop]"
              :type="item.whatType"
              style="width: 100%;"
              :placeholder="placeholder||(item.placeholder|| '请选择' + item.label)"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :disabled="item.disabled"
              :value-format="item.format || 'yyyy-MM-dd'"
              @change="datePicker"
            ></el-date-picker>
            <!-- 上传 -->
            <el-upload
              v-else-if="item.type == 'upload'"
              :action="item.action || action"
              :http-request="myload"
              :show-file-list="false"
              v-show="item.show!=undefined?item.show:true"
            >
              <el-button
                :style="{ padding: '10px 32px','margin-left': item.width || 'auto'}"
                :type="item.whatType"
              >{{ item.title }}</el-button>
            </el-upload>
            <!-- 难搞的数据放这 -->
            <template v-else-if="item.type == 'slot'">
              <slot :name="item.name"></slot>
            </template>
            <!-- 过滤纯文本 -->
            <el-popover v-else-if="item.type == 'flt'" placement="top" trigger="click">
              <div>{{formData[item.prop] | all(item.fltName,item.fltval)}}</div>
              <el-input
                slot="reference"
                class="inputSpan"
                :readonly="true"
                unselectable="on"
                :value="formData[item.prop] | all(item.fltName,item.fltval)"
              ></el-input>
            </el-popover>

            <!-- 文本 -->
            <el-popover v-else-if="item.type == 'span'" placement="top" trigger="click">
              <div>{{ formData[item.prop] }}</div>
              <el-input
                slot="reference"
                class="inputSpan"
                :readonly="true"
                unselectable="on"
                :value="formData[item.prop] "
              ></el-input>
            </el-popover>

            <!-- autocomplete -->
            <el-autocomplete
              v-else-if="item.type == 'autocomplete'"
              clearable
              :ref="item.prop"
              v-model="formData[item.prop]"
              :value-key="item.valueKey||'dataValue'"
              :fetch-suggestions="(str,cb)=>{completeSearch(str,cb,item.selectData,item.name)}"
              style="width: 100%;"
              :placeholder="placeholder||(item.placeholder|| '请输入' + item.label)"
              :disabled="item.disabled"
              @select="completeSelect($event,item.ck)"
              @clear="clear(item.clear)"
              @keyup.enter.native="$emit('enterTrigger')"
            ></el-autocomplete>
            <!-- 输入框 -->
            <el-input
              v-else
              clearable
              v-model="formData[item.prop]"
              :type="item.whatType"
              :placeholder="placeholder||(item.placeholder|| '请输入' + item.label)"
              :readonly="item.readonly"
              :disabled="item.disabled"
              :ref="item.prop"
              :maxlength="item.max"
              @input="inputval($event,item.t,item.prop)"
              @clear="clear(item.clear)"
              @blur="inputblur($event,item.blur)"
              rows="3"
              @keyup.enter.native="$emit('enterTrigger')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>