elementUI

一、导航

        <!-- 侧导航栏 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          :collapse-transition=false
        >
          <!-- 一级导航 -->
          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item index="2" v-for="item1 in item.children" :key="item1.id">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item1.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

注意:

1. el-menu unique-opened 是否只保持一个子菜单的展开 collapse-transition 是否开启折叠动画 等属性都在el-menu中设置

2. el-submenu是一级导航 在这里面进行一级导航数据的循环,循环一定要带key值 还有一点要注意的就是一定要带index,不然所有导航栏会一起打开闭合,因为默认的index值是一样的,还有一点index值应该是一个字符串,如果是数字,要在index前加上:冒号,后面加上引号隐式转换成字符串

3. el-menu-item是二级导航,同一级导航

1.侧导航栏的折叠与显示效果

        <el-aside :width="isCollapse?'64px':'200px'">
        <!-- 点击切换决定导航栏是否隐藏 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧导航栏 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          :collapse-transition="false"
          :collapse="isCollapse"
        >
          <!-- 一级导航 -->
          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">

toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }

collapse为真,导航栏折叠,侧栏宽度作出相应改变,注意这里:width="isCollapse?'64px':'200px'",宽度要加引号,是字符串

toggle-button的样式

.toggle-button {
  text-align: center;
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.2em;
}

2.在sessionStorage中保存左侧菜单的激活状态

1.添加点击事件

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

2.menu中

<el-menu
    :default-active="activePath"

3.在data中初始化

4.点击事件

saveNavState(path){
    sessionStorage.setItem('activePath',path)
}

5.在created中

created() {
    this.getMenulist();
    this.activePath=sessionStorage.getItem('activePath')
 },

二、表格

1.数据自定义样式

借助作用域插槽template slot-scope="scope",数据scope.row.mg_state

scope.row可以拿到当前这一行的数据，这个row代表的是行，这是element ui文档有说明

       <el-table-column label="状态">
         <template slot-scope="scope">
           <el-switch v-model="scope.row.mg_state"></el-switch>
         </template>
       </el-table-column>

2 渲染数据

    <el-table :data="userList" style="width: 100%" stripe border>
        <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>

data属性,表格的数据 el-table-column表格的每一列,label列名,prop每列的数据,是data中的数据

3.table修改头部样式

<el-table :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
</el-table>

// 修改table tr行的背景色
tableRowStyle ({ row, rowIndex }) {
    return 'background-color: pink'
},
// 修改table header的背景色
tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) {
        return 'background-color: #FAFAFA;color: #000;font-weight:500;'
    }
}

4.表格修改斑马线颜色

// 修改斑马线颜色
  .el-table__body tr:hover > td {
    background-color: #E8F7FE !important;
  }

三、分页

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1,2,5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

其中两个事件

    handleSizeChange(size){
        this.queryInfo.pagesize=size
        this.getUserList()
    },
    handleCurrentChange(page){
        this.queryInfo.pagenum=page
        this.getUserList()
    },

四、input

      <el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable @clear='getUserList'>
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
      </el-input>

clearable可清空 清空事件,清空是重新获取数据@clear='getUserList' 注意不要给input框设置样式,如果设置了样式,容易引起其他地方的样式改变 所以可以使用栅格布局,来设置它的宽度

如果上图不使用栅格布局而使用样式设置宽度,margin值等,会影响下面dialog框中input的样式,造成不必要的麻烦

五、switch

修改用户状态

        <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
        </template>

如果请求错误时,则修改错误,状态值取反

    async userStateChange(row) {
      const { data: res } = await this.$http.put(`users/${row.id}/state/${row.mg_state}`);
      if (res.meta.status != 200){
        //   注意这里,如果请求错误时,则修改错误,状态值取反
          row.mg_state=!row.mg_state;
          return this.$message.error("获取数据失败");
      }
      console.log(res.data);
      return this.$message.success("success");
    }

添加用户

添加用户前先进行表单预验证

    // 添加用户
    addUser() {
      // 先进行表单预验证
      this.$refs.addFormRef.validate( async valid => {
        //验证失败,返回
        if (!valid) return console.log("失败");
        console.log("ok");
        //发送axios请求
        const { data: res } = await this.$http.post('users', this.addForm);
        if (res.meta.status != 201) return this.$message.error('添加用户失败');
        this.$message.success("ok");
        this.addUserDialogVisible = false;
        this.getUserList();
      });
    }

六、MessageBox 弹框

删除用户

   // 删除用户
   removeUserById(id) {
     this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning"
     })
       .then(async () => {
         //确认删除,发送axios请求删除
         const { data: res } = await this.$http.delete("users/" + id);
         if (res.meta.status != 200)
           return this.$message.error("删除数用户失败");
         this.$message.success("删除用户成功");
         this.getUserList();
         this.queryInfo.pagenum = 1;
       })
       .catch(() => {
         this.$message({
           type: "info",
           message: "已取消删除"
         });
       });
   }

七、select选择器

v-model的值为当前被选中的el-option的 value 属性值

 <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in rolesList"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
    </el-option>
  </el-select>

注意这里:value值是id值 "item.id"

八、Dropdown 下拉菜单

下拉菜单选项click事件不生效

将@click改为@click.native='logoutHandle';即可监听选项的点击事件

<el-dropdown class="pull-right" >
   <span class="el-dropdown-link">
    <img src="./img/header.jpg" alt="" class="pull-right">
   </span>
   <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="logoutHandle">退出</el-dropdown-item>
   </el-dropdown-menu>
</el-dropdown>

表格头下拉菜单

 <el-table-column
          prop="statusName"
          label="状态"
          width="120"
        >
          <template slot="header" slot-scope="scope">
            <el-dropdown size="mini">
                  <span>
                    状态
                  </span>
              <i class="el-icon-caret-bottom"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="selectAll">全部</el-dropdown-item>
                <el-dropdown-item v-for="(item,index) in stateList" :key="index" @click.native="change_status(item)">
                  {{item.name}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <!-- 作用域插槽,给数据设置样式 -->
          <template slot-scope="scope">
            <i class="imgIcon orange" v-if="scope.row.status==0"><img src="@/assets/images/Yellow point.png"></i>
            <i class="imgIcon red" v-if="scope.row.status==1"><img src="@/assets/images/Red point.png"></i>
            <i class="imgIcon green" v-if="scope.row.status==2"><img src="@/assets/images/green point.png"></i>
            <i class="imgIcon gray" v-if="scope.row.status==3"><img src="@/assets/images/Gray point.png"></i>
            <i class="imgIcon gray" v-if="scope.row.status==4"><img src="@/assets/images/Gray point.png"></i>
            {{scope.row.statusName}}
          </template>
        </el-table-column>

九、复选框的折叠与显示v-show

 <!-- 所属领域 -->
      <div class="checkbox_bigbox" v-show="isShow" style="height: 60px">
        <span class="checkbox_title">所属领域：</span>
        <el-checkbox-group v-model="query.trade" class="checkbox_box" @change="search">
          <el-checkbox-button
            v-for="item in trade"
            :label="item.id"
            :key="item.id"
            class="checkbox_item"
          >{{item.dictName}}
          </el-checkbox-button>
        </el-checkbox-group>
        <span class="fold" @click="showMoreCheckbox">展开<i class="el-icon-arrow-down"></i></span>
      </div>
      <div class="checkbox_bigbox" v-show="!isShow">
        <span class="checkbox_title">所属领域：</span>
        <el-checkbox-group v-model="query.trade" class="checkbox_box" @change="search">
          <el-checkbox-button
            v-for="item in trade"
            :label="item.id"
            :key="item.id"
            class="checkbox_item"
          >{{item.dictName}}
          </el-checkbox-button>
        </el-checkbox-group>
        <!-- 展开效果 -->
        <span class="fold" @click="showMoreCheckbox" v-if="isShow">展开<i class="el-icon-arrow-down"></i></span>
        <span class="fold" @click="showMoreCheckbox" v-if="!isShow">收起<i class="el-icon-arrow-up"></i></span>

showMoreCheckbox() {
                this.isShow = !this.isShow
            },

isShow: true,