xm-select/docs/mds/XM10.md
2019-11-19 20:13:50 +08:00

1.3 KiB

重复选

开启重复选

:::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>

:::