解决elementUI Form表单 ElSelsect dataPicker 等与VueTreeSelect布局覆盖冲突问题
hideElementComponent() {
if (this.$refs) {
const refs = Object.values(this.$refs)
if (refs) {
refs.forEach((item) => {
try {
//判断是否事datePicker
if (item.$options.name === 'ElSelect') {
item.blur()
}
if (item.$options.name === 'ElDatePicker') {
if (item.$data.pickerVisible) {
item.$data.pickerVisible = false
}
}
} catch (e) {
console.log(e)
}
})
}
}
}
<treeselect v-model="formData.pid"
:disabled="showType==='info'"
:normalizer="normalizer"
:openOnClick="true"
:options="dataOptions.providerOptions"
:show-count="true"
placeholder="请选择"
@open="hideElementComponent()"
style="width:88%"
/>
要在对应的el-select 、datePicker中添加ref
<el-form-item label="类型" prop="type">
<el-select ref="type" v-model="formData.type" :disabled="showType==='info'" placeholder="请选择类型" style="width:88%">
<el-option
v-for="item in dataOptions.typeOptions"
:key="item.type"
:label="item.name"
:value="item.type"
>
</el-option>
</el-select>
</el-form-item>
解决