ElementUI el-tree 树形控件给节点添加图标

淩亂°似流年 2022-10-18 01:29 877阅读 0赞

Avue 这个基于Element的二次封装可以看看

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70

default-expand-all 默认分组全部展开
<el-tree :data="data" show-checkbox node-key="id" default-expand-all>
          <span class="el-tree-node__label" slot-scope="{ node, data }">
            <span>
              <i :class="data.icon"></i>
              {
   { (node || {}).label }}
            </span>
          </span>
</el-tree>
data(){
   return{
        data:[{
          value: 0,
          label: "xx平台",
          icon: "el-icon-folder-opened",
          children: [
            {
              value: 1,
              label: "xx单位",
              icon: "el-icon-folder-opened",
              children: [
                {
                  value: 1,
                  label: "1号机",
                  icon: "el-icon-video-camera-solid",
                },
              ],
            },
          ],
        },
        {
          value: 0,
          label: "xx平台",
          icon: "el-icon-folder-opened",
          children: [
            {
              value: 1,
              label: "1号机",
              icon: "el-icon-video-camera-solid",
            },
          ],
        }]
    }
}