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 判斷是否能進入管理頁面