显示方式

方块形状

<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
    el: '#demo1', 
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ]
})
</script>

方块形状, 隐藏删除图标

model: {
    label: {
        type: 'block',
        block: {
            //最大显示数量, 0:不限制
            showCount: 0,
            //是否显示删除图标
            showIcon: false,
        }
    }
},

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
    el: '#demo2', 
    model: {
        label: {
            type: 'block',
            block: {
                //最大显示数量, 0:不限制
                showCount: 0,
                //是否显示删除图标
                showIcon: false,
            }
        }
    },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ]
})
</script>

方块形状, 超过1个隐藏

model: {
    label: {
        type: 'block',
        block: {
            //最大显示数量, 0:不限制
            showCount: 1,
            //是否显示删除图标
            showIcon: true,
        }
    }
},

<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    model: {
        label: {
            type: 'block',
            block: {
                //最大显示数量, 0:不限制
                showCount: 1,
                //是否显示删除图标
                showIcon: true,
            }
        }
    },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ]
})
</script>

简单拼接形式

model: {
    label: {
        type: 'text',
        //使用字符串拼接的方式
        text: {
            //左边拼接的字符
            left: '【',
            //右边拼接的字符
            right: '】',
            //中间的分隔符
            separator: '，',
        },
    }
},

<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
    el: '#demo4', 
    model: {
        label: {
            type: 'text',
            //使用字符串拼接的方式
            text: {
                //左边拼接的字符
                left: '【',
                //右边拼接的字符
                right: '】',
                //中间的分隔符
                separator: '，',
            },
        }
    },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ],
})
</script>

自定义显示

model: {
    label: {
        type: 'xxxx', //自定义与下面的对应
        xxxx: {
            template(data, sels){
                return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
            }
        },
    }
},

<div id="demo5" class="xm-select-demo"></div>

<script>
var demo5 = xmSelect.render({
    el: '#demo5', 
    model: {
        label: {
            type: 'xxxx', //自定义与下面的对应
            xxxx: {
                template(data, sels){
                    return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
                }
            },
        }
    },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ],
})
</script>

自定义显示HTML

model: {
    label: {
        type: 'xxxx', //自定义与下面的对应
        xxxx: {
            template(data, sels){
                //也可以是html
                return `<div style="color: red;">${sels.length} / ${data.length}</div>`
            }
        },
    }
},

<div id="demo6" class="xm-select-demo"></div>

<script>
var demo6 = xmSelect.render({
    el: '#demo6', 
    model: {
        label: {
            type: 'xxxx', //自定义与下面的对应
            xxxx: {
                template(data, sels){
                    //也可以是html
                    return `<div style="color: red;">${sels.length} / ${data.length}</div>`
                }
            },
        }
    },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ],
})
</script>

直接显示下拉

model: {
    type: 'relative', //默认 absolute
},

<div id="demo7" class="xm-select-demo"></div>

<script>
var demo7 = xmSelect.render({
    el: '#demo7', 
    model: {
        type: 'relative',
    },
    filterable: true,
    toolbar: { show: true },
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
    ],
})
</script>