xm-select/docs/mds/ZP02.md

下拉树

tree

默认配置

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

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

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


<script>
layui.form.render();

layui.form.on('checkbox(showFolderIcon)', function(data){
	demo1.update({
		tree: {
			showFolderIcon: data.elem.checked
		}
	})
});
layui.form.on('checkbox(showLine)', function(data){
	demo1.update({
		tree: {
			showLine: data.elem.checked
		}
	})
});
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,
	tree: {
		show: true,
		showFolderIcon: true,
		showLine: true,
		indent: 20,
		expandedKeys: [ -3 ],
	},
	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>

:::