xm-select/docs/mds/XM10.md

重复选

开启重复选

:::demo

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

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

:::

重复选完关闭下拉

:::demo

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

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

:::

更换显示方式

:::demo 好像这样只能增不能减了~~ 有待完善

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

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    repeat: true,
    model: {
        label: {
            type: 'count',
            count: {
                template: function(data, sels){
                    var res = {};
                    sels.forEach(item => {
                       var name = item.name; 
                       !res[name] && (res[name] = 0);
                       res[name] += 1;
                    });
                    return Object.keys(res).map(key => {
                        return `${key} (${res[key]})`
                    }).join(',');
                }
            },
        }
    },
    data: [
        {name: '张三', value: 1},
        {name: '李四', value: 2},
        {name: '王五', value: 3},
    ]
})
</script>

:::