xm-select/docs/mds/ZP02.md

下拉树

tree

默认配置

tree: {
	//是否显示树状结构
	show: false,
	//是否展示三角图标
	showFolderIcon: true,
	//是否显示虚线
	showLine: false,
	//间距
	indent: 20,
	//默认展开节点的数组
	expandedKeys: [],
	//是否严格遵守父子模式
	strict: true,
},

:::demo

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

<br/>
<div class="layui-form">
	<input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
	<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
	<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
</div>

<div style="margin-top: 20px">间距</div>
<div id="slideTest1"></div>


<script>
layui.form.render();

['showFolderIcon', 'showLine', 'strict'].forEach(function(key){
	layui.form.on('checkbox('+key+')', function(data){
		var treeConfig = {};
		treeConfig[key] = data.elem.checked;
		demo1.update({
			tree: treeConfig
		})
	});
})

layui.slider.render({
	elem: '#slideTest1',
	min: 10,
	max: 100,
	showstep: true,
	input: true,
	tips: true,
	value: 20,
	change: function(value){
		demo1.update({
			tree: {
				indent: value
			}
		})
	}
});

var demo1 = xmSelect.render({
	el: '#demo1', 
	autoRow: true,
	filterable: true,
	tree: {
		show: true,
		showFolderIcon: true,
		showLine: true,
		indent: 20,
		expandedKeys: [ -3 ],
	},
	filterable: true,
	height: 'auto',
	data(){
		return [
			{name: '销售员', value: -1, disabled: true, children: [
				{name: '张三1', value: 1, selected: true, children: []},
				{name: '李四1', value: 2, selected: true},
				{name: '王五1', value: 3, disabled: true},
			]},
			{name: '奖品', value: -2, children: [
				{name: '奖品3', value: -3, children: [
					{name: '苹果3', value: 14, selected: true},
					{name: '香蕉3', value: 15},
					{name: '葡萄3', value: 16},
				]},
				{name: '苹果2', value: 4, selected: true, disabled: true},
				{name: '香蕉2', value: 5},
				{name: '葡萄2', value: 6},
			]},
		]
	}
})
</script>

:::

懒加载的树

tree: {
	show: true,
	expandedKeys: [ -1 ],
	//开启懒加载
	lazy: true,
	//加载方法
	load: function(item, cb){
		//item: 点击的节点, cb: 回调函数
		//这里模拟ajax
		setTimeout(function(){
			var name = item.name + 1;
			cb([
				{name: item.name + 1, value: item.value + '1', children: [] },
				{name: item.name + 2, value: item.value + '2' },
			])
		}, 500)
	}
},

:::demo

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

<script>
var demo2 = xmSelect.render({
	el: '#demo2', 
	autoRow: true,
	tree: {
		show: true,
		showFolderIcon: true,
		showLine: true,
		indent: 20,
		expandedKeys: [ -1 ],
		lazy: true,
		load: function(item, cb){
			setTimeout(function(){
				if(item.name.endsWith('2')){
					return cb([]);
				}
				cb([
					{name: item.name + 1, value: item.value + '1', children: [] },
					{name: item.name + 2, value: item.value + '2', children: [] },
				])
			}, 500)
		}
	},
	height: 'auto',
	data(){
		return [
			{name: '销售员', value: -1, children: [
				{name: '张三', value: 100, selected: true, children: []},
				{name: '李四1', value: 2, selected: true},
				{name: '王五1', value: 3, disabled: true},
			]},
			{name: '奖品', value: -2, children: [
				{name: '奖品3', value: -3, children: [
					{name: '苹果3', value: 14, selected: true},
					{name: '香蕉3', value: 15},
					{name: '葡萄3', value: 16},
				]},
				{name: '苹果2', value: 4, selected: true, disabled: true},
				{name: '香蕉2', value: 5},
				{name: '葡萄2', value: 6},
			]},
		]
	}
})
</script>

:::