ElementUI+Vue实现tab页面

该笔记总结于b站

Vue+Element项目实战

1.vue的的组件化应用

1. 在需要使用组件的地方进行引入

import DepMana from '../../components/sys/DepMana.vue';
import EcMana from '../../components/sys/EcMana.vue';

import JobLevelMana from '../../components/sys/JobLevelMana.vue';

import PosMana from '../../components/sys/PosMana.vue';

import PermissionMana from '../../components/sys/PermissionMana.vue';

2. 导入组件的名字,注意一下它是在data函数的外面!!!

    export default {

        name:"SysBasic",
        // 这个自定义的组件需要写在data的外面
        components:{
                    DepMana,
                    JobLevelMana,
                    EcMana,
                    PosMana,
                    PermissionMana


                },

data(){
return{

}
}

3. 在需要显示的地方加上如下的code:

<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="职称管理" name="DepMana">
        <dep-mana></dep-mana>
        
    </el-tab-pane>
    <el-tab-pane label="部门管理" name="PosMana">
        
        <pos-mana></pos-mana>
      
    </el-tab-pane>
    <el-tab-pane label="职称管理" name="JobLevelMana">
      <job-level-mana></job-level-mana> 
    </el-tab-pane>
    <el-tab-pane label="奖惩管理" name="EcMana">
       
        <ec-mana></ec-mana>
    </el-tab-pane>
     <!-- 需要注意name不可以重复 -->
     
     <el-tab-pane label="权限组" name="PermissionMana">
     <permission-mana></permission-mana>

     </el-tab-pane>
  </el-tabs>
</template>

4. v-model=“activeName”
   这个是浏览器进行默认显示的组件，我们可以在data中进行数据的绑定操作。

 // 组件化默认的位置
                activeName:"DepMana",

2.使用ElementUI实现侧边的导航栏

3.实现相关的增删改查的操作(暂时省略)。

4.相关的一些使用的技巧（按下回车的键盘点击操作实现添加，编辑时候的数据显示问题）

1. @keydown.enter.native=“” 事件，加上这个可以通过回车进行添加的操作

  <el-input
    size="small"
    icon="el-icon-circle-plus"
    placeholder="输入要添加的职位"
    v-model="post.name"
    
    @keydown.enter.native="addPosition"
      style="width:200px">
  </el-input>
  <el-button size="small" icon="el-icon-plus" type="primary"  style="margin-left:8px;" @click="addPostions">添加</el-button>

5.前端的一些使用技巧。