elementui el-tree多级组织结构实现增删改查及关键字搜索过滤效果代码-html代码-BFW代码库

elementui el-tree多级组织结构实现增删改查及关键字搜索过滤效果代码

代码语言：html

所属分类：其他

代码描述：elementui el-tree多级组织结构实现增删改查及关键字搜索过滤效果代码

代码标签： element ui el-tree 多级组织结构增删改查关键字搜索过滤

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <style>
        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 8px;
        }
        .show-hide:hover :nth-child(2) {
          display: inline-block !important;
        }
    </style>

</head>

<body>

    <div id="app">
        <div id="hacker-list">
            <el-input v-model="filterText" style="width:200px" placeholder="请输入关键字搜索"></el-input>


            <el-dialog :visible.sync="visible" title=" 选择人员">
                <el-tabs>
                    <el-tab-pane label="员工">
                        <p v-for="(item, index) in allemployees" @click="choose(item)" :key="index">{{item}}</p>
                    </el-tab-pane>
                    <el-tab-pane label="角色">
                        <p v-for="(item, index) in allemployees" @click="choose(item)" :key="index">{{item}}1</p>
                    </el-tab-pane>
                </el-tabs>

            </el-dialog>


            <el-tree node-key="label" :default-checked-keys="checkedkeys" :data="treedata" ref="tree" default-expand-all :props="defaultProps" accordion @check-change="handlechange" :show-checkbox="true" @node-click="handleNodeClick" :expand-on-click-node="false"  :filter-node-method="filterNode">


                <span class="custom-tree-node show-hide" slot-scope="{ node, data }">
          <span><i :class="data.icon"></i>{{ node.label }}</span>
                <span>
                    
                              <el-button type="text" size="mini" @click="() => changename(data)">修改</el-button>
            <el-button type="text" size="mini" @click="() => append(data)">新增</el-button>
            
            
            <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
          </span>
                </span>

            </el-tree>
            <el-button type="primary" @click="submit">提交</el-button>

        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script>
        var vue = new Vue({
    	el: "#app",
    	data: {
    	    filterText:"",
    	     checkedkeys:["王磊"],
    	    allemployees:["张珊","李四","王三","张端"],
    	    visible:false,
    	     input: '',
          treedata: [{
              isroot:true,
            icon:'el-icon-office-building',
            label: '某某公司',
            children: [{
                  icon:'el-icon-folder',
              .........完整代码请登录后点击上方下载按钮下载查看