SOURCE

layui.use(function () {
    var tree = layui.tree;
    // 模拟数据
    var data = [
        { title: '江西', id: 1, children: [{ title: '南昌', id: 1000, 
        children: [{ title: '青山湖区', id: 10001 }, { title: '高新区', id: 10002 }] },
         { title: '九江', id: 1001 }, { title: '赣州', id: 1002 }] },
        { title: '广西<i class="layui-icon layui-icon-face-smile"></i>', id: 2, children: [{ title: '南宁', id: 2000 }, { title: '桂林', id: 2001 }] },
        { title: '山西', id: 3, children: [] }
    ];
    // 渲染
    tree.render({
        elem: '#ID-tree-demo-showLine',
        data: data,
        showLine: false  // 是否开启连接线
    });
});
//https://juejin.cn/post/7424906244215455780 opentype.js 使用与文字渲染

<div class="layui-bg-gray" style="padding: 16px;height:800px">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-xs4">
      <div class="layui-card">
        <div class="layui-card-header">字体列表</div>
        <div class="layui-card-body">
          <div id="ID-tree-demo-showLine"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs8">
      <div class="layui-card">
        <div class="layui-card-header">字体预览</div>
        <div class="layui-card-body">
          结合 layui 的栅格系统<br>
          轻松实现响应式布局
        </div>
      </div>
    </div>
  </div>
</div>