谷粒商城day35 -商品服务-API-三级分类-给树形菜单添加新增删除页面效果

最新推荐文章于 2024-07-24 10:29:38 发布

原创最新推荐文章于 2024-07-24 10:29:38 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#给树形菜单添加新增删除页面效果 #ELEMENT UI

谷粒商城专栏收录该内容

150 篇文章

订阅专栏

本文介绍如何使用ElementUI实现树形菜单的新增和删除功能，通过具体代码示例展示如何设置显示勾选框、指定节点键值及限制菜单层级的操作。

1.打开ELEMENT UI 的API看到给树形菜单添加如下新增删除为如下两种方式，下面我们选择第二种

2. API往下翻可看到源码示例

    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

3.上面代码复制到我们的页面并进行修改

show-checkbox 显示勾选框

node-key="catId" 添加key key必须是能代表节点数据对象的属性里的唯一值，比如ID

:expand-on-click-node="false" 点击该按钮时不展开该菜单子菜单

v-if="node.level <= 2" 因为我们的菜单是三层所以前两层才显示追加

v-if="node.childNodes.length == 0" 子菜单数量为0的菜单才能被删除

<el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      node-key="catId"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">Append</el-button>
        <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
      </span>
    </span>
    </el-tree>