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>
