cascader 無限級聯選擇器的使用

html代碼

<div class="layui-form-item">
    <label class="layui-form-label">市內線路:</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,//需要的靜態數據，類型為數組，
        url: "{:url('cityLine/getCity')}",//異步獲取的數據，類型為數組，（data與url兩個參數二選一）
        //type: "post",//異步獲取的方式，默認get，可省略
        // triggerType: "change",//觸發方式，不填或其他都為click，可選參數"change"，即鼠標移入觸發
        // showLastLevels: true,//輸入框是否只顯示最后一級,默認false，即全顯示
        // where: {   //異步傳入的參數，可省略
        //     a: "aaa"
        // },
        //value: ["B", "BB2", "BBB4"],//傳入的初始值，類型為數組，值為data的value值
        // changeOnSelect: true,
        success: function (valData,labelData) {
            //回調函數，選擇完成之后的回調函數，返回值為value數組
            console.log(valData,labelData);

            city_value = valData;
        }
    });

這里需要特別注意渲染數據返回格式問題 ：Code是0首字母大寫Data同樣首字母也是大寫 否則無法渲染成功（文檔無這個說明）

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

by ：wangyang

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。