Element Plus el-tree 点击文字不选中,点击checkbox选中

128 阅读1分钟

<el-tree ref="menuRef" node-key="id" :render-content="renderNode" show-checkbox :data="state.menuData" :render-after-expand="false" :props="{ children: 'children', label: 'name' }" @node-click="selectMenuItem" @check-change="handleCheckChange" />



// 主要是renderNode函数

// 自定义渲染节点
const renderNode = (h: any, { node, data, store }: any) => {
  // 判断是否为最后一层节点
  const isLeaf = !data.children || data.children.length === 0;
  if (isLeaf) {
    return h(
      'span',
      { class: 'custom-tree-node', style: 'width: 100%;cursor: pointer;height: 100%;' },
      h(
        'span',
        {
          class: 'node-label',
          style: 'width: 100%;cursor: pointer;display:block;height: 100%;align-content: center;',
          onClick: (event: any) => {
            event.stopPropagation(); // 阻止默认的点击事件
            console.log('Leaf node label clicked', node.label);
            // 选中文字后需要操作的方法
            selectMenuItem(data)
          },
        },
        node.label
      )
    );
  } else {
    return h('span', { class: 'custom-tree-node' }, node.label);
  }
};