做了个需求表格内使用了多选下拉,为了美观所以需要同行显示,antd文档上没看到对应的api,改了点css样式实现
<template>
<a-select mode="tags" style="width: 20%" :token-separators="[',']">
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">{{ (i + 9).toString(36) + '很长很长很长' }}</a-select-option>
</a-select>
</template>
<script>
export default {
methods: {
handleChange(value) {
console.log(`selected ${value}`);
},
},
};
</script>
<style lang="scss" scoped>
// 让元素水平排列
/deep/.ant-select-selection--multiple .ant-select-selection__rendered {
margin-left: 5px;
margin-bottom: -3px;
height: auto;
max-height: 30px;
max-width: 200px;
overflow: auto;
overflow-y: hidden;
}
/deep/.ant-select-selection--multiple .ant-select-selection__choice {
overflow: initial;
}
// 调整内部样式
/deep/.ant-select ul,
.ant-select ol {
display: flex;
}
/deep/.ant-select-selection--multiple > ul > li,
.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
margin-top: 3px;
height: 22px;
line-height: 22px;
font-size: 14px;
width: auto;
max-height: 200px;
}
/deep/.ant-select-search--inline .ant-select-search__field__wrap{
max-width: 0px !important;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar {
/*滚动条整体样式*/
height: 5px;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: lightskyblue;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
border-radius: 10px;
background: #ededed;
}
</style>