vue2 el-tree自定义图标和是否显示复选框

在Vue2的el-tree组件中，可以通过自定义图标和是否显示复选框来定制树形菜单的样式。

要自定义图标，可以使用el-tree的自定义节点模板功能。首先，在el-tree的数据结构中，为每个节点添加一个icon属性，用于指定该节点的图标。然后，在el-tree的节点模板中，使用icon属性来动态设置节点的图标，可以是文字、图片链接或者其他HTML元素。这样就可以根据业务需求，为不同的节点指定不同的图标，使菜单更加直观和易于理解。

要控制是否显示复选框，可以通过el-tree的show-checkbox属性来实现。将show-checkbox设为true，即可显示所有节点的复选框；将show-checkbox设为false，则可以隐藏所有节点的复选框。同时，还可以根据业务需求，动态控制某些节点显示复选框，而其他节点不显示。

总的来说，通过el-tree组件的自定义节点模板和show-checkbox属性，可以灵活地定制树形菜单的外观和功能，满足各种业务需求。同时，Vue2的数据驱动特性和组件化开发模式，也使得操作这些特性变得更加简洁和高效。

相关问题

vue2 el-tree复选框是否打钩状态_el-tree 长列表太卡的问题

关于vue2 el-tree复选框是否打钩状态的问题，可以通过绑定节点的`checked`属性来控制复选框的状态。例如：

<el-tree :data="data" :props="defaultProps" @check="handleCheck"></el-tree>

data() {
  return {
    data: [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 11,
        label: '二级 1-1',
        children: [{
          id: 111,
          label: '三级 1-1-1'
        }]
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label',
      checked: 'checked'
    }
  };
},
methods: {
  handleCheck(node, checked, childNodeList) {
    // 处理节点的 checked 属性
    node.checked = checked;
    // 处理子节点的 checked 属性
    if (childNodeList) {
      childNodeList.forEach(childNode => {
        childNode.checked = checked;
      });
    }
  }
}

关于el-tree长列表太卡的问题，可以尝试以下优化措施：

1. 使用虚拟滚动：可以通过设置`el-tree`的`renderAfterExpand`和`lazy`属性来实现虚拟滚动，只渲染可见区域的节点，减少渲染时间和内存占用。

2. 异步加载数据：可以将数据分批加载，只加载当前展开的节点和其子节点，不展开的节点暂不加载。

3. 缓存数据：可以将已经加载的节点数据缓存起来，避免重复请求数据。

4. 减少节点渲染：可以通过设置`el-tree`的`lazy`属性和`node-key`属性，只渲染可见区域的节点和其子节点，减少节点渲染时间和内存占用。

5. 使用`keep-alive`缓存组件：可以将`el-tree`组件使用`keep-alive`缓存起来，避免频繁创建和销毁组件，提高性能。

在vue中，el-tree新增节点默认勾选复选框

在 vue 中使用 el-tree 组件新增节点并默认勾选复选框，可以使用以下方法：

1. 在 el-tree 组件的 data 属性中，为新增的节点添加 checked 属性，并设置为 true，例如：

data: [
  {
    id: 1,
    label: '节点 1',
    children: [
      {
        id: 2,
        label: '节点 2',
        checked: true
      }
    ]
  }
]

2. 使用 el-tree 组件的 node-key 属性，并在 data 属性中为新增的节点添加该属性的值，例如：

node-key: 'id',
data: [
  {
    id: 1,
    label: '节点 1',
    children: [
      {
        id: 2,
        label: '节点 2'
      }
    ]
  }
]

然后，在 el-tree 组件的 ref 属性中，使用 this.$refs.tree.setCheckedNodes([{ id: 2 }]) 方法将新增的节点设为勾选状态。

this.$refs.tree.setCheckedNodes([{ id: 2 }])

请注意，在使用 setCheckedNodes 方法时，需要保证 el-tree 组件已经渲染完毕，因此通常需要在 mounted 钩子函数中使用。

mounted () {
  this.$refs.tree.setCheckedNodes([{ id: 2 }])
}