基础用法
默认状态：
<jtbc-field-cascader data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" placeholder="这是一个级联选择器，请选择"></jtbc-field-cascader>
width 为 100%：
width 为 300：
width 为 300px：
<jtbc-field-cascader data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" width="100%"></jtbc-field-cascader><jtbc-field-cascader data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" width="300"></jtbc-field-cascader><jtbc-field-cascader data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" width="300px"></jtbc-field-cascader>
禁用状态
组件禁用：
<jtbc-field-cascader value="9" data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" disabled></jtbc-field-cascader>
注意， 加了个 disabled
expand_mode 属性
expand_mode 为 mouseover 时：
<jtbc-field-cascader expand_mode="mouseover" data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]" ></jtbc-field-cascader>
expand_mode : click（默认） | mouseover 。
expand_mode 属性有两个值 -- click ，鼠标点击才会展开下一级；mouseover ，鼠标放上去就会展开下一级。
separator 属性
分割符换成 “>” ：
<jtbc-field-cascader separator=" > " value="9" data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]}]"></jtbc-field-cascader>
separator 的默认值为 ' / ', 可以根据需要更换。
下拉框高度设置
selector-min-height 和 selector-max-height，用于设置下拉框的最大、最小高度。selector-min-height 默认是 100px, selector-max-height 默认为 300px
selector-max-height 设置为 150px:
<jtbc-field-cascader selector-max-height="150px" data="[{"text":"01小学","value":1,"children":[{"text":"一年级","value":"2","children":[{"text":"一班","value":"9"},{"text":"二班","value":"10"}]},{"text":"二年级","value":"3","children":[{"text":"一班","value":"11"}]}]},{"text":"02小学","value":4,"children":[{"text":"一年级","value":"5","children":[{"text":"一班","value":"8"}]},{"text":"二年级","value":"6"},{"text":"三年级","value":"7"}]},{"text":"03小学","value":12},{"text":"04小学","value":13},{"text":"05小学","value":14},{"text":"06小学","value":15},{"text":"07小学","value":16},{"text":"08小学","value":17]"></jtbc-field-cascader>
点击打开下拉框，可以看到超出了设置的 150px 的最大高度，出现了滚动条。
selector-min-height 设置最低高度，就不再演示，可自行尝试。
closeSelector 方法
closeSelector 方法，这个方法用于把打开的下拉框，立即关闭。一般用于点击页面任何部位，关闭下拉框。
示例：
//jtbc-field-cascader 组件
const jtbcFieldCascader = document.querySelector('#cascader-close');
if (jtbcFieldCascader != null) {
document.addEventListener('click', function(e) {
// 判断点击元素是否在组件外框外
if (!jtbcFieldCascader.contains(e.target)) {
jtbcFieldCascader.closeSelector(); // 关闭对话框
}
});
}
数据源格式
开放维护 -> 模块管理 -> 字段编辑，中的“级联选择器”数据源设置问题。如图
