使用vxe-table遇到的问题

  1. 在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样式的下面引入
在这里插入图片描述
在这里插入图片描述

  1. 在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>
  1. lalal
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值