示例
基础用法
PCPhonePad
<page>
<module title="无默认值">
<form
x="form"
layout="horizontal">
<item
label="单选"
name="a"
node="cascader"
data="{{data}}"
bind-changed="handleHChanged"
/>
<item
label="多选"
name="b"
node="cascader"
multiple
data="{{data}}"
bind-changed="handleHChanged"
/>
</form>
</module>
<module title="有默认值">
<form
x="form"
layout="horizontal">
<item
label="单选"
name="a"
node="cascader"
data="{{data}}"
value="{{value}}"
bind-changed="handleHChanged"
/>
<item
label="多选"
name="b"
node="cascader"
multiple
data="{{data}}"
value="{{multipleValue}}"
bind-changed="handleHChanged"
/>
</form>
</module>
<module title="超过13条自动显示搜索框" subtitle="条数是按枝干计算得到的，不是整条完整路径">
<form
x="form"
layout="horizontal">
<item
label="单选"
name="a"
node="cascader"
data="{{lists}}"
value="{{value}}"
bind-changed="handleHChanged"
/>
<item
label="多选"
name="b"
node="cascader"
multiple
data="{{lists}}"
value="{{multipleValue}}"
bind-changed="handleHChanged"
/>
</form>
</module>
</page>
const data = [
{
label: '指南',
value: 'zhinan',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'fankui',
disabled: true,
label: '反馈',
},
{
value: 'xiaolv',
label: '效率',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字体',
disabled: true,
},
{
value: 'icon',
label: 'Icon 图标',
},
{
value: 'button',
label: 'Button 按钮',
},
],
},
];
const lists=[];
for(let i=0;i<20;++i){
lists.push({
value:`${i}`,
label:`label${i}`,
children:[
{
value:`${i}-${i}`,
label:`label${i}-${i}`,
}
]
});
}
export default XPage({
data: {
data,
value:['zhinan', 'yizhi'],
multipleValue: [['zhinan', 'yizhi'], ['zujian', 'layout']],
lists,
},
show() {
},
handleHChanged(node) {
console.info('node', node);
},
});
选择任意层级
父级和子级节点都是独立的可选项。
PCPhonePad
<page>
<module title="可选任意层级">
<form
x="form"
layout="horizontal">
<item
label="单选，可选择任意层级"
name="d"
node="cascader"
branch-selectable
colspan="{{3}}"
data="{{data}}"
/>
<item
multiple
branch-selectable
label="多选，可选择任意层级"
name="e"
node="cascader"
selectBtn="{{true}}"
colspan="{{3}}"
data="{{data}}"
/>
</form>
</module>
<module title="可选任意层级，末级节点仅可以选择单个节点">
<form
x="form"
layout="horizontal">
<item
multiple
branch-selectable
label="多选，可选择任意层级(末级节点仅可以选择单个节点)"
name="e"
node="cascader"
selectBtn="{{true}}"
colspan="{{3}}"
data="{{data}}"
onlyOneLeafCanBeSelected
/>
</form>
</module>
</page>
const data = [
{
label: '指南',
value: 'zhinan',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'fankui',
disabled: true,
label: '反馈',
},
{
value: 'xiaolv',
label: '效率',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字体',
disabled: true,
},
{
value: 'icon',
label: 'Icon 图标',
},
{
value: 'button',
label: 'Button 按钮',
},
],
},
];
export default XPage({
data: {
data,
value:['zhinan', 'yizhi'],
multipleValue: [['zhinan', 'yizhi'], ['zujian', 'layout']],
},
show() {
},
});
远程获取数据，远程搜索
PCPhonePad
<page>
<form
x="form"
layout="horizontal">
<item
label="远程获取数据"
name="h"
node="cascader"
placeholder="直接配置URL即可"
ajax="{{ajax}}"
colspan="{{3}}"
multiple
before-render="{{beforeCascaderRender}}"
bindchanged="handleHChanged"
/>
<item
label="远程获取数据 + LazyLoad"
name="g"
node="cascader"
lazy
lazyLoad="{{cascaderLazyLoad}}"
colspan="{{3}}"
/>
<item
label="远程搜索示例"
name="c"
node="cascader"
remote-searchable
colspan="{{3}}"
ajax="{{ajax}}"
before-render="{{beforeCascaderRender}}"
/>
</form>
</page>
const traverseNodes = (nodes) => {
return nodes.map(({ aggCode, aggName, leaf, childList }) => {
const node = {
label: aggName,
value: aggCode,
leaf, // 标识节点是否为叶子节点，lazyLoad时可标识该节点是否包含子节点
};
if (childList && childList.length) {
node.children = traverseNodes(childList);
}
return node;
});
};
export default XPage({
data: {
ajax: {
url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/table/children',
},
},
show() {
// 给lazyload cascader赋值；或在dml文件内，直接设置value属性<item value="{['AH01', 'Z25', 'Z25-1']}" />
this.getComponent('form').setData({
g: ['AH01', 'Z25', 'Z25-1'],
});
},
beforeCascaderRender(res) {
const {
data: { result },
} = res;
/*
返回的结构
{ data: Array<{ label: String, value: any, children: Array }>}
*/
return {
data: traverseNodes(result),
};
},
cascaderLazyLoad(node, callback) {
// 首次加载parentId可不传
const { value: parentId } = node || {};
return CabinX.ajax({
url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/table/children/lazy',
method: 'get',
params: { parentId },
}).then((res) => {
const {
data: { result },
} = res;
const nodes = traverseNodes(result);
callback(nodes);
});
},
handleHChanged(node) {
console.info('node', node);
},
});
Attributes
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| name | 名称 | String | -- | -- | PC/Mobile | -- |
| value | 绑定值 | String / Number / Array | -- | -- | PC/Mobile | -- |
| data | 选项 | Array<{label, value}> | -- | -- | PC/Mobile | -- |
| ajax | 请求相关 | String/Object<{url, params, initData}>/Promise | -- | -- | PC/Mobile | -- |
| remoteSearchable | 远程搜索 | Boolean | -- | false | PC/Mobile | -- |
| branchSelectable | 枝干可选 | Boolean | -- | false | PC/Mobile | -- |
| multiple | 多选 | Boolean | -- | false | PC/Mobile | -- |
| onlyOneLeafCanBeSelected | 多选开启时末级节点仅单选 | Boolean | -- | false | PC | -- |
| disabled | 禁用 | Boolean | -- | false | PC/Mobile | -- |
| placeholder | 占位符 | String | -- | -- | PC/Mobile | -- |
| collapseTags | 是否合并多选 效果 | Boolean | -- | false | PC/Mobile | -- |
| loaded | 请求处理完成后的回调 | Function | -- | -- | PC/Mobile | -- |
| lazy | 懒加载 | Boolean | -- | false | PC/Mobile | -- |
| lazyLoad | 加载动态数据的方法 | Function(node, resolve) | -- | -- | PC/Mobile | -- |
| beforeChange | 改变前钩子函数 | Function(newValue: any, oldValue: any): Boolean/Promise | -- | -- | PC/Mobile | -- |
| separators | 搜索关键词过滤分隔符连接符 | Boolean / Array | false | -- | PC | -- |
| beforeRequest | 在请求之前对参数进行操作，如果返回 false ，则阻止请求发送(可用于校验和控制请求频率) | false/Object | PC | -- | ||
| beforeRender | 渲染前数据过滤，须返回对应数据 | Function | -- | -- | ||
| filter | 自定义搜索方法 | Function(searchValue: String, item: { label: String, value: any }): Boolean | -- | -- | PC | -- |
| selectBtn | 全选和反选 | Boolean | -- | -- | PC/Mobile | -- |
| panelSelectBtn | panel级全选 | Boolean | -- | -- | Mobile | -- |
| lazyFillBack | 动态加载数据回显数据时需要补全的node节点信息 | Array | -- | [] | PC | -- |
| clearable | 可清空 | Boolean | -- | false | PC/Mobile | -- |
| virtualScroll | 虚拟滚动 | Boolean | -- | false | PC/Mobile | -- |
| checkAllJustParentValue | 当子节点全部选中时,父节点也是选中,仅返回父级value | Boolean | -- | false | PC | -- |
Events
| 名称 | 说明 | 回调参数 | 端 | 版本 |
|---|---|---|---|---|
| changed | 值改变后触发 | (value) | PC/Mobile | -- |