v1.1.8
This commit is contained in:
93
docs/mds/ZP06.md
Normal file
93
docs/mds/ZP06.md
Normal 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>
|
||||
```
|
||||
:::
|
||||
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -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 |
|
||||
|
||||
|
||||
### 全局方法
|
||||
|
||||
@@ -101,6 +101,7 @@ export default [{
|
||||
{ path: '/plugin/laydate', name: '下拉日期多选', component: importMd('/ZP03') },
|
||||
{ path: '/plugin/panel', name: '下拉折叠面板', component: importMd('/ZP04') },
|
||||
{ path: '/plugin/transfer', name: '下拉穿梭框', component: importMd('/ZP05') },
|
||||
{ path: '/plugin/cascader', name: '级联模式 Cascader', component: importMd('/ZP06') },
|
||||
]
|
||||
}, {
|
||||
path: '/question',
|
||||
|
||||
Reference in New Issue
Block a user