提交 74ec45a4 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

fix: 下拉组件选项宽度无限宽

上级 c274aece
...@@ -10,13 +10,17 @@ ...@@ -10,13 +10,17 @@
:placeholder="$t(options.attrs.placeholder)" :placeholder="$t(options.attrs.placeholder)"
:popper-append-to-body="inScreen" :popper-append-to-body="inScreen"
@change="changeValue" @change="changeValue"
@focus="setOptionWidth"
> >
<el-option <el-option
v-for="item in options.attrs.datas" v-for="item in options.attrs.datas"
:key="item[options.attrs.key]" :key="item[options.attrs.key]"
:style="{width:selectOptionWidth}"
:label="item[options.attrs.label]" :label="item[options.attrs.label]"
:value="item[options.attrs.value]" :value="item[options.attrs.value]"
/> >
<span :title="item[options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[options.attrs.label] }}</span>
</el-option>
</el-select> </el-select>
</template> </template>
...@@ -43,7 +47,8 @@ export default { ...@@ -43,7 +47,8 @@ export default {
data() { data() {
return { return {
options: null, options: null,
showNumber: false showNumber: false,
selectOptionWidth: 0
} }
}, },
computed: { computed: {
...@@ -119,6 +124,12 @@ export default { ...@@ -119,6 +124,12 @@ export default {
text: item text: item
} }
}) })
},
setOptionWidth(event) {
// 下拉框弹出时,设置弹框的宽度
this.$nextTick(() => {
this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
})
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论