This commit is contained in:
maplemei
2020-02-10 14:39:38 +08:00
parent 588abc3d5d
commit 27f86e678c
16 changed files with 253 additions and 90 deletions

93
docs/mds/ZP06.md Normal file
View File

@@ -0,0 +1,93 @@
## 级联模式
### cascader
默认配置
```
cascader: {
//是否显示树状结构
show: false,
//间距
indent: 20,
//是否严格遵守父子模式
strict: true,
},
```
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<br/>
<div class="layui-form">
<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();
['strict'].forEach(function(key){
layui.form.on('checkbox('+key+')', function(data){
var config = {};
config[key] = data.elem.checked;
demo1.update({
cascader: config
})
});
})
layui.slider.render({
elem: '#slideTest1',
min: 50,
max: 300,
showstep: true,
input: true,
tips: true,
value: 100,
change: function(value){
demo1.update({
cascader: {
indent: value
}
})
}
});
var demo1 = xmSelect.render({
el: '#demo1',
autoRow: true,
cascader: {
show: true,
indent: 100,
},
height: '200px',
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>
```
:::

View File

@@ -7,43 +7,27 @@
<script>
var demo1 = xmSelect.render({
el: '#demo1',
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: true,
},
autoRow: true,
filterable: true,
filterDone(){
console.log('搜索结束')
},
remoteSearch: true,
//远程搜索回调
remoteMethod: function(val, cb){
console.log('远程')
cb([
{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},
]},
]);
cascader: {
show: true,
indent: 100,
},
height: '100px',
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
height: 'auto',
filterable: true,
data(){
return [
{name: '销售员', value: -1, disabled: true, children: [
{name: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三1', value: 1, selected: true, children: []},
{name: '张三11111111111', 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: '奖品3333333333', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
@@ -56,7 +40,6 @@ var demo1 = xmSelect.render({
}
})
</script>
```
:::

View File

@@ -48,6 +48,7 @@
| disabled | 是否禁用多选 | boolean | true / false | false |
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
| tree | 树形结构, 具体看下表 | object | - | - |
| cascader | 级联结构, 具体看下表 | object | - | - |
### prop
@@ -173,6 +174,15 @@ list: [ "ALL", "CLEAR",
| indent | 间距 | int | - | 20 |
| expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] |
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
### cascader
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | --------------------- | ------------- | ------------- | ------ |
| show | 是否展示为级联结构 | boolean | true / false | false |
| indent | 每一级的宽度 | int | - | 100 |
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
### 全局方法