layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

仿 ElementUI 的 Cascader 級(jí)聯(lián)選擇器

更新:2021-1-10 創(chuàng)建:2020-12-3

文檔

效果圖
單選


多選無(wú)折疊


多選折疊


配置參數(shù)文檔(*表示必填)
*elem:HTMLElement對(duì)象,例如:$('input[name=example]')[0]
*options:Array 數(shù)據(jù)
onChange: Function(curr, value) curr: 選中值,value:所有值(當(dāng)multiple為true有效)
multiple:boolean 是否開(kāi)啟多選,默認(rèn) Flase
collapseTags:boolean 是否折疊選項(xiàng)(multiple 開(kāi)啟時(shí)有效),默認(rèn) True
showAllLevels: boolean 是否查看所有級(jí)名,默認(rèn) True
props:數(shù)據(jù)對(duì)象解析,默認(rèn):{ label: 'label', value: 'value', children: 'children' }
placeholder:String 無(wú)選擇文本填充 默認(rèn) 請(qǐng)選擇
separator:String 顯示文本的分隔符號(hào)(showAllLevels開(kāi)啟時(shí)生效) 默認(rèn) /
valueSeparator:String 選擇值的級(jí)聯(lián)分隔符號(hào) 默認(rèn) ,
groupSeparator:String 多選時(shí)選擇值的組分隔符號(hào) 默認(rèn) |


配置參考DEMO
layui.config({
base: './ext/'
}).extend({
cascader: 'cascader/cascader'
}).use(['jquery', 'cascader'], function () {
var $ = layui.jquery, cascader = layui.cascader;
var areaTree = '[{"id":"1000","province_city":"\u5317\u4eac","fid":"0","children":[{"id":"1368","province_city":"\u5317\u4eac\u5e02","fid":"1000","children":[{"id":"1397","province_city":"\u4e1c\u57ce\u533a","fid":"1368"},{"id":"1398","province_city":"\u897f\u57ce\u533a","fid":"1368"},{"id":"1399","province_city":"\u5d07\u6587\u533a","fid":"1368"},{"id":"1400","province_city":"\u5ba3\u6b66\u533a","fid":"1368"},{"id":"1401","province_city":"\u671d\u9633\u533a","fid":"1368"},{"id":"1402","province_city":"\u6d77\u6dc0\u533a","fid":"1368"},{"id":"1403","province_city":"\u4e30\u53f0\u533a","fid":"1368"},{"id":"1404","province_city":"\u77f3\u666f\u5c71\u533a","fid":"1368"},{"id":"1405","province_city":"\u623f\u5c71\u533a","fid":"1368"},{"id":"1406","province_city":"\u901a\u5dde\u533a","fid":"1368"},{"id":"1407","province_city":"\u987a\u4e49\u533a","fid":"1368"},{"id":"1408","province_city":"\u95e8\u5934\u6c9f\u533a","fid":"1368"},{"id":"1409","province_city":"\u660c\u5e73\u533a","fid":"1368"},{"id":"1410","province_city":"\u5927\u5174\u533a","fid":"1368"},{"id":"1411","province_city":"\u6000\u67d4\u533a","fid":"1368"},{"id":"1412","province_city":"\u5e73\u8c37\u533a","fid":"1368"},{"id":"1413","province_city":"\u5bc6\u4e91\u53bf","fid":"1368"},{"id":"1414","province_city":"\u5ef6\u5e86\u533a","fid":"1368"}]}]},{"id":"1001","province_city":"\u4e0a\u6d77","fid":"0","children":[{"id":"1369","province_city":"\u4e0a\u6d77\u5e02","fid":"1001","children":[{"id":"1433","province_city":"\u9ec4\u6d66\u533a","fid":"1369"},{"id":"1434","province_city":"\u5362\u6e7e\u533a","fid":"1369"},{"id":"1435","province_city":"\u5f90\u6c47\u533a","fid":"1369"},{"id":"1436","province_city":"\u957f\u5b81\u533a","fid":"1369"},{"id":"1437","province_city":"\u9759\u5b89\u533a","fid":"1369"},{"id":"1438","province_city":"\u666e\u9640\u533a","fid":"1369"},{"id":"1439","province_city":"\u95f8\u5317\u533a","fid":"1369"},{"id":"1440","province_city":"\u8679\u53e3\u533a","fid":"1369"},{"id":"1441","province_city":"\u6768\u6d66\u533a","fid":"1369"},{"id":"1442","province_city":"\u5b9d\u5c71\u533a","fid":"1369"},{"id":"1443","province_city":"\u95f5\u884c\u533a","fid":"1369"},{"id":"1444","province_city":"\u5609\u5b9a\u533a","fid":"1369"},{"id":"1445","province_city":"\u677e\u6c5f\u533a","fid":"1369"},{"id":"1446","province_city":"\u91d1\u5c71\u533a","fid":"1369"},{"id":"1447","province_city":"\u9752\u6d66\u533a","fid":"1369"},{"id":"1448","province_city":"\u6d66\u4e1c\u65b0\u533a","fid":"1369"},{"id":"1449","province_city":"\u5357\u6c47\u533a","fid":"1369"},{"id":"1450","province_city":"\u5949\u8d24\u533a","fid":"1369"},{"id":"1451","province_city":"\u5d07\u660e\u53bf","fid":"1369"}]}]}]';

cascader.render({
elem: $('input[name=areas]')[0],
showAllLevels: true,
props: {
label: 'province_city',
value: 'id',
children: 'children'
},
options: JSON.parse(areaTree),
});
});
注:如果有問(wèn)題可以加下我QQ 2725629672,請(qǐng)附加上LAYUI CASCADER

下載

立即下載 去 GitHub 下載
該擴(kuò)展組件由第三方用戶主動(dòng)投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。