xm-select/docs/mds/XM19.md

工具条

默认工具条

:::demo

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

<script>
var demo1 = xmSelect.render({
    el: '#demo1', 
    toolbar: {
        show: true,
    },
    filterable: true,
    paging: true,
    pageSize: 3,
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
        {name: '赵六', value: 4},
        {name: '苹果', value: 5},
        {name: '香蕉', value: 6},
        {name: '凤梨', value: 7},
        {name: '葡萄', value: 8},
        {name: '樱桃', value: 9},
        {name: '车厘子', value: 10},
        {name: '火龙果', value: 11},
    ]
})
</script>

:::

隐藏图标

:::demo

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

<script>
var demo2 = xmSelect.render({
    el: '#demo2', 
    toolbar: {
        show: true,
        showIcon: false,
    },
    filterable: true,
    paging: true,
    pageSize: 3,
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
        {name: '赵六', value: 4},
        {name: '苹果', value: 5},
        {name: '香蕉', value: 6},
        {name: '凤梨', value: 7},
        {name: '葡萄', value: 8},
        {name: '樱桃', value: 9},
        {name: '车厘子', value: 10},
        {name: '火龙果', value: 11},
    ]
})
</script>

:::

自定义工具条

:::demo

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

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    toolbar: {
        show: true,
        list: ['ALL', {
            name: '自定义',
            icon: 'el-icon-star-off',
            method(data){
                alert('我是自定义的');
            }
        }]
    },
    filterable: true,
    paging: true,
    pageSize: 3,
    data: [
        {name: '张三', value: 1, selected: true},
        {name: '李四', value: 2, selected: true},
        {name: '王五', value: 3},
        {name: '赵六', value: 4},
        {name: '苹果', value: 5},
        {name: '香蕉', value: 6},
        {name: '凤梨', value: 7},
        {name: '葡萄', value: 8},
        {name: '樱桃', value: 9},
        {name: '车厘子', value: 10},
        {name: '火龙果', value: 11},
    ]
})
</script>

:::