- 在vxe-table的列vxe-column中使用vxe-input、vxe-select等,vxe-input、vxe-select会显示不全,下边框无法展示
解决办法:
在该页面中
<style>
.vxe-input {
line-height: 30px!important;
}
</style>
或者声明一个公共css文件,将改样式放在公共的css文件中,并在main.js中的vxe-table样式的下面引入
- 在vxe-table的列vxe-column中使用vxe-select,点击select框不展示下拉框及内容
<vxe-column title="" width="70">IP协议</vxe-column>
<vxe-column field="protocol" title="" width="200">
<template #default="{ row }">
<vxe-select v-model="row.protocol" transfer clearable placeholder="请选择协议类型">
<!-- <vxe-option :value=1 label="UDP"></vxe-option>
<vxe-option :value=2 label="TCP"></vxe-option> -->
<vxe-option
v-for="(item,index) in protocolSelectItem"
:key="index"
:value="item.id"
:label="item.name"
></vxe-option>
</vxe-select>
</template>
</vxe-column>
解决办法:不使用transfer, 添加以下样式即可
<style>
.vxe-select--panel {
position: fixed !important;
min-width: 10% !important;
left: auto !important;
}
注意放在<style></style>中,不要放在<style scoped></style>中,会不起作用;
</style>
- lalal