Select在自定义模板时，如果是多选，所选中的项“对号”icon会出现重叠的情况

[Done-L]

New York America London U.K. Sydney Australian <script> export default { data () { return { model: '' } } } </script>

[dosubot]

Hey @Done-L! 👋 I'm here to help you with any bugs, questions, or contributions while you wait for a human maintainer.

为了防止在使用 Select 组件进行多选时，所选中的项“对号”图标出现重叠的情况，可以添加一些 CSS 来确保适当的间距和对齐。以下是一个示例，展示了如何修改 CSS 以实现这一点：

<template>
    <Select v-model="model" style="width:200px" multiple>
        <Option value="New York" label="New York">
            <span>New York</span>
            <span style="float:right;color:#ccc">America</span>
        </Option>
        <Option value="London" label="London">
            <span>London</span>
            <span style="float:right;color:#ccc">U.K.</span>
        </Option>
        <Option value="Sydney" label="Sydney">
            <span>Sydney</span>
            <span style="float:right;color:#ccc">Australian</span>
        </Option>
    </Select>
</template>
<script>
    export default {
        data () {
            return {
                model: []
            }
        }
    }
</script>
<style scoped>
.ivu-select-item {
    position: relative;
    padding-right: 24px; /* 确保有足够的空间放置对号图标 */
}

.ivu-select-item .ivu-icon {
    position: absolute;
    right: 8px; /* 调整图标位置 */
    top: 50%;
    transform: translateY(-50%);
}
</style>

此外，可以利用 select.less 文件中的预定义样式来确保一致的样式。例如，以下 CSS 规则可以帮助管理标签和图标的间距和对齐：

.@{select-prefix-cls}-multiple .@{css-prefix}tag {
    height: 24px;
    line-height: 22px;
    margin: 3px 4px 3px 0;  // 调整边距以防止重叠
    max-width: 99%;
    position: relative;
    span:not(.ivu-select-max-tag) {
        display: block;
        margin-right: 14px;  // 确保关闭图标的空间
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    i {
        display: block;
        position: absolute;
        right: 4px;
        top: 4px;
    }
}

通过结合 Vue 模板调整和 select.less 文件中的预定义样式，可以确保“对号”图标和其他元素的适当间距和对齐，防止任何重叠。根据设计需求调整 marginRight 和其他边距值即可^[1][2]。

To continue talking to Dosu, mention @dosu.