我在用vue2时有一个组件是这样写的 <el-popover placement="right-end" title="提示" content="队列名(今天0点与昨天0点进队数量差)" style="width: 350px; margin: 10px" trigger="focus" > <el-cascader ref="cabinCode" slot="reference" v-model="request.queueName" :options="queueNameList" :props="{ multiple: true , label: 'label' }" clearable filterable /> </el-popover> 但是我发现我无法用Style里的width调整这个组件的宽度 我应该怎么做
时间: 2024-02-10 08:06:45 浏览: 75
el-tree==>添加分级图标==>添加引导线样式==>点击节点展示全部父节点信息==>使用$store封装全局组件
对于 `el-popover` 组件的宽度调整,你可以尝试在 `style` 中使用 `min-width` 来设置最小宽度,例如:
```html
<el-popover
placement="right-end"
title="提示"
content="队列名(今天0点与昨天0点进队数量差)"
style="min-width: 350px; margin: 10px"
trigger="focus"
>
<el-cascader
ref="cabinCode"
slot="reference"
v-model="request.queueName"
:options="queueNameList"
:props="{ multiple: true , label: 'label' }"
clearable
filterable
/>
</el-popover>
```
这样就可以保证 `el-popover` 的最小宽度为 350px 了。
另外,如果需要更精确地控制 `el-popover` 的宽度,可以尝试使用 `popper-class` 属性来自定义样式,例如:
```html
<el-popover
placement="right-end"
title="提示"
content="队列名(今天0点与昨天0点进队数量差)"
popper-class="my-popper"
trigger="focus"
>
<el-cascader
ref="cabinCode"
slot="reference"
v-model="request.queueName"
:options="queueNameList"
:props="{ multiple: true , label: 'label' }"
clearable
filterable
/>
</el-popover>
```
然后在样式文件中定义 `my-popper` 类的样式,例如:
```css
.my-popper {
width: 350px;
}
```
这样就可以精确地控制 `el-popover` 的宽度了。
阅读全文