使用vxe-table遇到的问题

゛anqiaoyun

已于 2023-11-27 17:56:59 修改

阅读量925

点赞数 1

文章标签： vue.js

于 2023-11-27 16:00:46 首次发布

本文链接：https://blog.csdn.net/weixin_45588201/article/details/134647384

版权

在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>