layui form select 下拉选择框缩进

版本号

2.8.3

问题描述

表单操作的时候要用的select选择分类，希望有子类的选项缩进，我用了最笨的办法，用了&nbsp；，选择了选项后 也会显示出来，很不美观，谢谢指教是否有什么好的办法，还是可以用layui 的 tree 实现select？多谢大佬指教。。。

业务代码

function queryClassif(pid) { // 请求分类后端接口
let url = '{:url("getListsCategoriesLayuiTable")}';
layObj.get(url,function (res) {
queryTree(res,pid)
});
}

function queryTree(res = [],pid = 0) {
// 请求分类后端接口
let temps = '<option value="0">--根目录--</option>';
let separr = ['-| ','    -| ','        -| ','          -| '];

        let i =0;
        tree(res);//前端已经将pid为1的数据取出
        function tree(data){
            for (let item of data) {
                let separator = separr[i];
                if (item['id'] === pid){
                    temps += `&lt;option  data-id="${item['id']}" value="${item['id']}" selected&gt;` +separator+`${item["name"]}&lt;/option&gt;`
                }else{
                    temps += `&lt;option  data-id="${item['id']}" value="${item['id']}"&gt;` +separator+`${item["name"]}&lt;/option&gt;`
                }
                if (item['child'] &amp;&amp; item['child'].length &gt; 0) {
                    i ++;
                    tree(item['child']);
                }
            }
            i --;
        }
        $('#classif').html(temps)
        form.render('select');
    }