// 生成部门树
function generateDepartmentTree(data, htmlArr) {
  data.forEach(function(item) {
    htmlArr.push(`<li>
                    <span data-id="${item.id}">
                      <span></span>
                      <span>${item.name}</span>
                    </span>`);
    if(item.children && item.children.length) {
      htmlArr.push(`<ul>`);
      generateDepartmentTree(item.children, htmlArr);
      htmlArr.push(`</ul>`);
    }
    htmlArr.push(`</li>`);
  });
}

var departmentTreeHtmlArr = [];
var list = [
    {
        id: 1,
        name: '1',
        children: [
            {
                id: 10,
                name: '10',
                children: [
                    {
                        id: 110,
                        name: '110'
                    },
                    {
                        id: 111,
                        name: '111'
                    }
                ]
            }
        ]
    }
];
generateDepartmentTree(list, departmentTreeHtmlArr);
var departmentTreeHtml = departmentTreeHtmlArr.join('');
console.log(departmentTreeHtml);

document.querySelector('ul').innerHTML = departmentTreeHtml ;

结果：

• 1
  • 10
    • 110
    • 111

添加padding-left值：

function generateDepartmentTree(data, htmlArr, paddingLeft=0) {
  var isExistChildren;
  data.forEach(function(item) {
    isExistChildren = item.children && item.children.length;
    htmlArr.push(`<li>
                    <span data-id="${item.id}" style="padding-left: ${paddingLeft}px;">
                      <span></span>
                      <span title="${item.name}">${item.name}</span>
                    </span>`);
    if(isExistChildren) {
      htmlArr.push(`<ul>`);
      generateDepartmentTree(item.children, htmlArr, paddingLeft+20);
      htmlArr.push(`</ul>`);
    }
    htmlArr.push(`</li>`);
  });
}