106 lines
2.0 KiB
Markdown
106 lines
2.0 KiB
Markdown
## 下拉树
|
|
|
|
### tree
|
|
|
|
默认配置
|
|
|
|
```
|
|
tree: {
|
|
//是否显示树状结构
|
|
show: false,
|
|
//是否展示三角图标
|
|
showFolderIcon: true,
|
|
//是否显示虚线
|
|
showLine: false,
|
|
//间距
|
|
indent: 20,
|
|
//默认展开节点的数组
|
|
expandedKeys: [],
|
|
},
|
|
```
|
|
|
|
|
|
:::demo
|
|
```html
|
|
|
|
<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>
|
|
```
|
|
:::
|