Ioufer 2022-01-12 15:02 采纳率: 88%
浏览 3915
已结题

Element-tree节点禁止点击

img


这是用element中tree结构,现在的需求是,当带着某个参数进入这个页面以后,那么这些树型节点因为参数的原因,有个别的节点是禁止点击,当这个节点禁止点击时,鼠标悬浮在节点上时,出现禁选图标,例如第一个节点那样的标志,哪位朋友帮帮忙,多谢

  • 写回答

2条回答 默认 最新

  • ZionHH 2022-01-12 15:53
    关注

    可以用自定义节点伪实现,如果为disabled覆盖一个禁止点击的dom上去

    img

    <template>
      <div class="home">
        <el-tree
          :data="data"
          node-key="id">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <div v-if="data.disabled" class="disabled" @click.stop></div>
          </div>
        </el-tree>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          data: [{
            id: 1,
            label: '一级 2',
            children: [{
              id: 3,
              label: '二级 2-1',
              disabled: true,
              children: [{
                id: 4,
                label: '三级 3-1-1'
              }, {
                id: 5,
                label: '三级 3-1-2'
              }]
            }, {
              id: 2,
              label: '二级 2-2',
              children: [{
                id: 6,
                label: '三级 3-2-1'
              }, {
                id: 7,
                label: '三级 3-2-2'
              }]
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        }
      }
    }
    </script>
    
    <style lang="scss">
    .el-tree-node__content {
      position: relative;
    }
    .disabled {
      cursor: not-allowed;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    </style>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月20日
  • 已采纳回答 1月12日
  • 创建了问题 1月12日

悬赏问题

  • ¥15 remotes安装提示没有description文件
  • ¥15 AttributeError: 'NoneType' object has no attribute 'drop_duplicates'报错
  • ¥15 以下代码,运行结果报错
  • ¥15 Vivado仿真数据出错
  • ¥15 银河麒麟不支持vant等前端框架怎么办?
  • ¥15 vue3的子组件在父页面调用不显示不生效问题
  • ¥15 cadence PEX
  • ¥15 phython创建了文件 显示在项目下面,但运行不了,运行时还是运行main文件,并且说main文件不允许并行运行
  • ¥15 FutureWarning:不推荐使用空或全 NA 条目的 DataFrame 串联行为。怎么改呢?
  • ¥15 Chatgpt突然无法正常显示数学公式,如何解决?