cascader 無(wú)限級(jí)聯(lián)選擇器的使用

html代碼

<div class="layui-form-item">
    <label class="layui-form-label">市內(nèi)線路:</label>
    <div class="layui-input-block" style='position: relative;'>
         <input type="text" id="layui_cascader" class="layui-input" readonly="readonly">
    </div>
</div>

js代碼

var city_value = '';
    var cas=cascader({
        elem: "#layui_cascader",
        //data: data,//需要的靜態(tài)數(shù)據(jù)，類型為數(shù)組，
        url: "{:url('cityLine/getCity')}",//異步獲取的數(shù)據(jù)，類型為數(shù)組，（data與url兩個(gè)參數(shù)二選一）
        //type: "post",//異步獲取的方式，默認(rèn)get，可省略
        // triggerType: "change",//觸發(fā)方式，不填或其他都為click，可選參數(shù)"change"，即鼠標(biāo)移入觸發(fā)
        // showLastLevels: true,//輸入框是否只顯示最后一級(jí),默認(rèn)false，即全顯示
        // where: {   //異步傳入的參數(shù)，可省略
        //     a: "aaa"
        // },
        //value: ["B", "BB2", "BBB4"],//傳入的初始值，類型為數(shù)組，值為data的value值
        // changeOnSelect: true,
        success: function (valData,labelData) {
            //回調(diào)函數(shù)，選擇完成之后的回調(diào)函數(shù)，返回值為value數(shù)組
            console.log(valData,labelData);

            city_value = valData;
        }
    });

這里需要特別注意渲染數(shù)據(jù)返回格式問(wèn)題 ：Code是0首字母大寫Data同樣首字母也是大寫 否則無(wú)法渲染成功（文檔無(wú)這個(gè)說(shuō)明）

https://fly.layui.com/extend/cascader/（官方文檔）

by ：wangyang

總結(jié)

以上是生活随笔為你收集整理的cascader 无限级联选择器 渲染数据问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。