1.菜单高亮

用到element-ui里面的default-active

此属性规定 定义哪一个路径那个菜单栏就高亮显示 那么我们可以点击菜单栏的时候 拿到路径放到sessionStorage缓存中 在每次页面初始化的时候赋值回去
1.

 <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#3594fa"
          unique-opened
          :collapse="isCollapseL"
          :collapse-transition="false"
          router
          :default-active="activePath"
        >

动态绑定default-active属性 自定义一个变量activePath

   <el-menu-item
              @click="saveNavState('/' + subItem.path)"
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
            >

定义点击事件获取菜单栏对应的路径 给到变量activePath

//保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    }

在初始化的时候还原回来

created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath");
  },

2.面包屑实现

    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

3.卡片及栅格の应用

属性解析：
:span=“6” 表示每个栅格的宽度 总共24个单位宽
:gutter=“20” 表示每个栅格之间的间距

 <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <div style="margin-top: 15px;">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入内容">
              <el-button
                slot="append"
                icon="el-icon-search"
              ></el-button> </el-input
          ></el-col>
          <el-col :span="6"
            ><el-button type="primary">添加用户</el-button></el-col
          >
        </el-row>
      </div>
    </el-card>

4.el-tableの应用

  <!-- 表格区域 -->
        <el-table :data="userlist" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="username" label="姓名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="role_name" label="角色"> </el-table-column>
          <el-table-column prop="mg_state" label="状态"> </el-table-column>
          <el-table-column label="操作"> </el-table-column>
        </el-table>

data绑定数据 prop绑定之指定元素 border属性给表格添加边框 stripe 斑马纹 为表格添加索引 type=“index”

        <el-table-column type="expand"> </el-table-column>

type="expand"属性为展开列

5.表单自定义校验

在from表单校验中由于没有指定的校验 如手机号校验，邮箱校验等 我们此时就可以用自定义校验

代码实践 注意在data里面

 data() {
    var checkEmail = (rule, value, cb) => {
      const regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号"));
    };
    var checkMobile = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (regEmail.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的邮箱"));
    };
    }

自定义一个变量 等于箭头函数 这个箭头函数就是自定义校验规则 那么在箭头函数的形参中有三个参数 rule（校验规则）value（需要验证的值）cb（可以自定义名称 回调函数）只要验证通过就可以直接调cb函数 如果验证失败提供一个error对象 里面定义错误消息

  email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },
          {
            validator: checkEmail,
            trigger: "blur"
          }
        ],

定义完成后 在规则里面通过validator来指定自定义的校验规则 trigger指定触发条件

6.表单项重置

当我们在验证不通过关闭对话框的时候 由于触发了验证规则 再次点开验证规则包括数据依然存在 影响用户操作体验
这里可以使用element里面的表单重置函数

 <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%"
      @close="addDialogClosed"
    >

定义一个close事件 当对话框关闭的时候调用 使用resetFields()实现规则以及数据的重置
注意与重置内容为空不同的是resetFields()还可以清除验证规则

 // 关闭添加用户弹框事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    }

7.messageBox二次确认对话框の应用

首先要通过原型挂载的方式把 MessageBox.confirm挂载到vue 的原型上

Vue.prototype.$confirm = MessageBox.confirm

然后就可以用this.方式来使用 然后通过catch捕获用户的取消行为 返回字符串
用户点击取消返回cancel 确认返回confirm
通过返回参数进行往下执行的操作

async removeUsersinfo(id) {
      console.log(id);
      // this.deldialogVisible = true;
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      console.log(confirmResult);
      // 用户点击取消返回cancel 确认返回confirm
      if (confirmResult != "confirm") {
        return this.$message.info("已取消操作");
      }
    }

8.Tag 标签の应用

用法很简单一眼会 这里边用到了作用域插槽

   <el-table :data="rightsList" border stripe>
        <el-table-column type="index"> </el-table-column>
        <el-table-column label="权限名称" prop="authName"> </el-table-column>
        <el-table-column label="路径" prop="path"> </el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
      </el-table>

9.树形控件の应用

      <el-tree :data="rightsList" :props="treeProps"></el-tree>

data是要传递的数据 props 在data里面 绑定传递数据的对象

 treeProps: {
        children: "children",
        label: "authName"
      },

show-checkbox :为表格添加复选框属性
default-expand-all：默认展开树形结构
node-key：点击复选框传递相应code
:default-checked-keys=“defKeys”：默认勾选中的复选框
实现效果

树形结构的事件
getCheckedKeys：获取选中的复选id
getHalfCheckedKeys：获取半选框的id
代码应用

 // 点击确定设置权限
    async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ];
      const idStr = keys.join(",");
      console.log(keys, idStr, "keys");
      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids: idStr }
      );
      if (res.meta.status !== 200) {
        return this.$message.error("操作失败");
      }
      this.$message.success("分配权限成功");
      this.getRoleList();
      this.setRigthDialogVisible = false;
    }

10.树形表格の应用

由于element-ui沒有提供树形表格 所以我们要
引入依赖 放到入口文件中 封装公告组件提供全局使用
npm 下载方式

npm i vue-table-with-tree-grid

在main入口文件中引入

import TreeTable from 'vue-table-with-tree-grid'

手动注册为全局可用组件

Vue.component('tree-table',TreeTable)

代码应用

      <tree-table :data="cateList" :columns="columns"> </tree-table>

data：绑定的数据源
columns：表格个列的配置 在data里面定义
:selection-type=“false”：隐藏复选框
:expand-type=“false” ：隐藏展开列
show-index ：显示索隐列
index-text="#" ：索隐列名称
border ：纵向分割线…
具体看文档
https://blog.csdn.net/Sky_fy_1314/article/details/107383695

 columns: [
        {
          lable: "分类名称",    //列名
          prop: "cat_name"      //对应列的属性名
        }
      ]

11.树形表格模板列の应用

   <template slot="isOk" slot-scope="scope">
          <i
            style="color:lightgreen"
            v-if="scope.row.cat_deleted === false"
            class="el-icon-success"
          ></i>
          <i style="color:red" v-else class="el-icon-error"></i>
        </template>

columns: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        // 第二列定义模板列
        {
          label: "是否有效",
          type: "template", //   定义当前的模板列
          template: "isOk" //   模板列名称
        }
      ]

12.Cascader 级联选择器の实战应用

  <el-cascader
            clearable
            change-on-select
            v-model="selectedKeys"
            :options="ParentCateList"
            expand-trigger="hover"
            :props="cascaderProp"
            @change="parentCateChange"
          ></el-cascader>

属性解读
1.:options=“ParentCateList” 绑定级联选择器的数据源
2.:props=“cascaderProp” 级联选择器的配置项 在data里面定义

 //   级联选择器的配置对象
      cascaderProp: {
        value: "cat_id",       //要传递的参数
        label: "cat_name",       //列表展示的数据
        children: "children"     //子节点数据源
      },

3. v-model=“selectedKeys” 注意级联选择器的双向绑定是一个数组 而不是对象
   因为级联选择器是要选择多项的 把选中的id存到绑定的数组中

      selectedKeys: []

4. clearable ：是否可清空
5. change-on-select ：是否支持任意级别的选择

最终实现效果

13.Alert 警告框の应用

这个相对比较简单

常用属性：
:closable=“false” ：控制警告框是否可以关闭
show-icon ：是否展示警告框图标

14.Tabs 标签页の应用

属性解析
v-model：实现数据动态绑定 将当前激活的名称 name标签 动态绑定到对应的值身上
标签内的name回自动绑定到 v-model上

     <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="用户管理" name="first">动态参数</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">静态属性</el-tab-pane>
      </el-tabs>
``

```javascript
      activeName: "first", //被激活的标签名称

15.动态编辑标签の应用

通过控制input输入框和button按钮来切换显示与隐藏
代码案例

    <!-- 输入的文本框 -->
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >

  data() {
    return {
      inputValue: "", //文本框中输入的内容
      inputVisible: false, //控制文本框的显示

点击tag标签时切换input输入框自动获取光标

showInput(row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    }

16.Steps 步骤条の应用

属性解析
align-center：控制步骤条居中
:active=“1” ：默认显示到第几步骤

17.Tabs 标签页の应用

Steps 步骤条与Tabs 标签页联动
el-tab-pane有一个name属性 会自动双向绑定到v-model上面
所以我们可以给name一个变量 就是上面的:active属性绑定到同一个变量
注意:active属性只接受number类型的
so 最简单的办法就是-0 :active=“activeIndex - 0” 隐式转换数字类型

实现效果