Vue + elementUi 组件

一、树形控件(el-tree) + Icon 图标实现带图标的菜单栏

1. 页面布局

     <template>
     <!-- 菜单信息 -->
     <nav>
          <el-tree
            class="filter-tree"
            :data="items"
            node-key="path"
            :props="defaultProps"
            highlight-current
            :render-content="renderContent"
            @node-click="handleNodeClick"
            ref="tree"
            accordion
          >
          </el-tree>
     </nav>
     </template>

data：存放要渲染的数据

node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

props：配置选项

highlight- current：是否高亮当前选中节点，默认值是 false

render-content：树节点的内容区的渲染 Function，图标的渲染依靠这个方法

node-click：节点被点击时的回调

accordion：是否每次只打开一个同级树节点展开

2. JS 代码 

<script>
export default {
   data(){
     return {
      //菜单
      items:[
          {name:'首页',path:'Homepage',icon:"el-icon-s-home"},
          {name:'资源管理',path:null,children:[{name:'学科管理',path:'Object'},{name:'阶段管理',path:'Stage'},{name:'关卡管理',path:'Checkpoints'}]},
          {name:'人员管理',path:null,children:[{name:'用户管理',path:'Student'},{name:'激活用户',path:'ActiveUser'}]},
          {name:'消息处理',path:null,children:[{name:'验收处理',path:'CheckProcess'},{name:'延期处理',path:'DelayProcess'}]},
          {name:'项目',path:'ProjectItem',icon:"el-icon-folder-opened",},
          {name:'看板',path:'Board',icon:"el-icon-data-line",}
      ],
      //配置显示的内容为属性名为 name 的值
      defaultProps: {
        label: "name",
      },
   }
 },
 methods:{
   // 渲染函数
    renderContent(h, { node, data, store }) {
      return (
        <span>
          <i class={data.icon}>&nbsp;&nbsp;</i>
          <span>{node.label}</span>
        </span>
      );
    },
     //点击最后一个子节点要有相应方法
    handleNodeClick(data, node) {
      const children = this.$refs.tree.getNode(data);
      if (children.data.path === null) {
        return;
      } else {
        this.$router.push({
          name: children.data.path,
        });
      }
    },
 }
}
</script>

 3. 最终效果展示

二、搜索框组件的实现 

1. 页面布局

<template>
      <!-- 搜索框-->
    <div class="search">
      <form-input class="searchInput" placeholder=" 输入要查找的名称" v-model="filterText">
      </form-input>
    </div>
</template>

 v-model：绑定的是搜索框中的内容，根据搜索框中的内容对要展示的数据进行过滤展示

2. JS 代码

<script>
export default {
  data(){
   return {
     //搜索框
     filterText: "",
   }
 },
  computed: {
        //  输入检索内容
        tables() {
            const filterText = this.filterText;
            if (filterText) {
                // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
                // 注意： filter() 不会对空数组进行检测。
                // 注意： filter() 不会改变原始数组。
            return this.tableData.filter((data) => {
                    // some() 方法用于检测数组中的元素是否满足指定条件;
                    // some() 方法会依次执行数组的每个元素：
                    // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
                    // 如果没有满足条件的元素，则返回false。
                    // 注意： some() 不会对空数组进行检测。
                    // 注意： some() 不会改变原始数组。
             return Object.keys(data).some((key) => {
                        // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
                        // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
                        if (key == 'name') {
                            return String(data[key]).indexOf(filterText) > -1;
                        }
                    })
                })
            }
            return this.tableData;
        }
    },
}
</script>

tableData：表示从后台获取来的完整数据

tables：经过过滤后最终要展示在页面的数据

3. 最终效果展示