element-ui常用组件使用

1，下拉菜单组件的使用

 <el-form-item label="角色" label-width="100px">

                <!-- 如果select绑定的数据和option的value一样，就会显示label的值 -->

                <el-select v-model="currroleid">

                  <el-option label=请选择 :value="1"></el-option>

                  <!-- <el-option label="请求回来的角色名字遍历得到" value="beijing"></el-option> -->

                  <el-option :label='item.roleName'

                  :value="item.id"

                   v-for="(item,i) in roles" :key='i'>

                  </el-option>

                </el-select>

              </el-form-item>

 

侧边栏 导航组件 使用      el-menu

　　el-submenu      子导航

　　el-menu-item-group  子分组

　　el-menu-item

　　有顶栏 横这的导航样式

　　侧边导航，

　　router 属性 值是布尔值，  开启之后    是否使用vue-router模式，开启之后会在激活导航时，以index 作为path 进行路由跳转

　　

 

 侧边导航

 

 

 

 

 

 

输入框组件  一行一列，，里显示的，东西

 

 

表格组件   和，分页组件

tabble 表格  用法，最外层，table 绑定 表格的数据，：data="tableData"数组    在table-column 列里使用，prop 来拿里边的对应数据，例如，date,name,addres 等

 

 table-column 

type 属性   tape="index"    表示，表格从1开始往下一次累加

 

发送GET请求  请求，表格数据，页码，每页个数，输入框的值

query是输入框的值 可以为空    num页数默认1，  size 个数 默认2

分类相关的数据，用来接受返回的对应数据据，总数，页码，数量

 

 

 

 

请求返回数据的处理

 

 

表格渲染时间  处理格式化

 

 

 

表格里 列，放入 状态组件，因为不是字符串  所以要加外层容器   template

 

 

分页组件  分页组件的前提  时该接口支持 分页    返回的参数有pagenum  页数 和 pagesize  条数

 

 事件，size-change     点击每一页显示几条数据，几个数量 时 触发

　　curren-change      点击，分页1，2，3，4，5，6   时触发的事件

　　:curren-page="第几页"               //：curren-page="pagenum"

　　:page-sizes=[100,200]      每一页显示几条数据的选项

　　：page-size="100"    默认的时100条

　　layout   控制 改分页组件有哪些附加功能

　　：total   数据的总条数

分页功能

 

 

对话框组件   点击之后，true   出现一个对话框，输入框 等等  可以输入参数 来添加用户之类的

 

 

 

 

提示成功

 

 

添加用户 调用接口之后   更新表单数据

 

 

消息弹框

 

 

 删除用户的操作，功能  调接口之后的操作

 

 

下拉框组件  下拉框select是form组件  所以使用vimodel绑定

 

 

 

 

 点击某个数字的时候，currroleid  会变成某个数字的索引

 

 下拉输入框，显示的所有角色，，通过接口返回来的数据

 

 

 

 

 修改用户的角色

 

 左侧导航接口返回   导航列表，返回的有对应的路径

 

通过路由守卫，判断是否有token 判断是否能进入管理页面