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>

:::

全部工具条

//全选, 清空, 反选
xmSelect.render({
	toolbar: {
		show: true,
		list: [ 'ALL', 'CLEAR', 'REVERSE' ]
	},
})

:::demo

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

<script>
var demo4 = xmSelect.render({
	el: '#demo4', 
	toolbar: {
		show: true,
		list: [ 'ALL', 'CLEAR', 'REVERSE' ]
	},
	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>

:::