Element-UI如何使用

這篇文章將為大家詳細講解有關Element-UI如何使用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、安裝好vue-cli腳手架之后
1、安裝Element-UI：
npm i element-ui -S
2、項目中 main.js 文件中引用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
3、注冊使用：
Vue.use(ElementUI)

二、使用Element-UI
1、最外層頁面整體框架，使用el-row el-col，進行柵格化處理，即Layout 布局
不使用Container 布局容器，自己使用class="container"  class="header"  class="main"來自定義樣式

<template>

    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo"></el-col>
            <el-col :span="14" class="userinfo"></el-col>
        </el-col>
        <el-col :span="24" class="header">

        </el-col>
    </el-row>

</template>

這些是外部的布局容器，定義內部的小組件時，可以使用Element-UI提供的組件，比如NavMenu 導航菜單等等

三、側邊欄導航菜單的使用

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">導航一</span>
        </template>
        <el-menu-item-group>
            <span slot="title">分組一</span>
            <el-menu-item index="1-1">選項1</el-menu-item>
            <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
            <el-menu-item index="1-3">選項3</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導航二</span>
    </el-menu-item>
</el-menu>

這樣子即可生成一個側邊導航，但是，每個導航會有一個標題，很丑

只需要將
<el-menu-item-group>
    <span slot="title">分組一</span>
    <el-menu-item index="1-1">選項1</el-menu-item>
    <el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
改為
    <el-menu-item index="1-1">選項1</el-menu-item>
    <el-menu-item index="1-2">選項2</el-menu-item>
    即可，去掉分組一這個標題

NavMenu 導航菜單參數說明：
<el-menu unique-opened router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"></el-menu>
1、collapse：菜單是否折疊隱藏起來(只顯示圖標)，可以通過事件，取反這個值，從而實現折疊與展開
2、unique-opened：菜單子項，每次只展開一個子菜單
3、default-active：當前激活菜單的 index
4、router：激活 vue-router 模式，使用index作為path進行路由跳轉(默認是使用to進行路由導向)

四、對于Table路由，是home頁面的子路由，所以在children里面定義這個Table路由，然后在home頁面上，需要顯示的地方，使用<router-view></router-view>來顯示Table路由的內容，這里是在mian里面定義的，然后顯示子路由內容

五、index綁定的值的類型必須是string類型，不能是number類型，和key的綁定不一樣

<el-submenu :index="index+''" v-for="item,index in $router.options.routes">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">{{item.name}}</span>
    </template>
</el-submenu>

直接寫:index="index+"  ，會報錯誤，需要綁定的屬性值是string類型，現在是number類型，解決辦法：使用隱式類型轉換，即" index+'' "   即可將index轉換為string類型
六、側邊導航，有的是有下拉列表的，有的是沒有的，所以需要在定義路由的時候，指明哪些是沒有下拉列表的，這里使用oneLeaf:true，表示該路由是沒有下拉列表的，循環的時候根據這個屬性進行判斷，這里是遍歷：
<el-submenu>和<el-menu-item>，需要在最外面套一個template標簽進行循環，
<template  v-for="item,index in $router.options.routes"></template>
<el-menu unique-opened router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">

<template  v-for="item,index in $router.options.routes">
    <el-submenu :index="index+''" v-if="!item.oneLeaf">

        <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item :key="index" v-for="list,index in item.children" :index="'/'+list.path">{{list.name}}</el-menu-item>
    </el-submenu>
    <el-menu-item :index="'/'+item.children[0].path" v-if="item.oneLeaf">
            <i :class="item.icon"></i>
            <span slot="title">{{item.children[0].name}}</span>
    </el-menu-item>
</template>

</el-menu>

七、Table 表格
用于展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。

<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" >
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column label="操作" width="150">
    <template scope="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">刪除</el-button>
    </template>
    <el-pagination
          background
          layout="prev, pager, next"
          :total="totalPage"
          :pageSize="pageSize"
          :currentPage="currentPage"
          >
        </el-pagination>
</el-table-column>
</el-table>

1、data：在表格中顯示的數據，array類型
2、sortable：以設置了該屬性的列為基準進行排序
3、formatter：用于格式化指定列的值，接受一個Function，會傳入兩個參數：row和column，可以根據自己的需求進行處理。
4、page-size：每頁顯示條目個數，支持 .sync 修飾符
5、total：總條目數
6、current-page：當前頁數，支持 .sync 修飾符
八、表格分頁
在data里面設置total、page-size、current-page等屬性，然后綁定在el-pagination組件上，然后通過這些屬性來過濾或篩選總數據tableData3，即可實現分頁
首頁是給el-table部分綁定數據：如圖

js部分的變動：


九、
增加用戶接口：通過參數傳入新增的用戶數據，push到模擬的用戶數據的數組里，然后返回一個200給前臺，新增成功
刪除用戶接口：通過前臺傳入的用戶id，在接口處，篩選出不等于這個id的所有數據，然后返回給前臺，即表示刪除了這個id對應的用戶數據，通過filter方法
編輯用戶數據接口：通過前臺傳入的id參數，利用some方法，篩選出對應的用戶數據，然后更改這個用戶數據，將所有的值更改為前臺傳入的參數
編輯用戶界面和增加用戶界面是一樣的，通過this.editform = Object.assign({},row)，將當前行的用戶數據，直接拷貝到打開的編輯界面上，有一個問題，只有姓名、年齡和地址傳過去了，性別和生日日期沒有，這里需要做下修改：

<el-radio-group v-model="editform.sex">
    <el-radio :label="1">男</el-radio>
    <el-radio :label="0">女</el-radio>
</el-radio-group>

label需要動態綁定
登錄接口：
在login.vue里面，直接axios.post('/login').then()，會報錯誤：Cannot read property 'then' of undefined
原因是mock.js里面的登錄接口，沒有返回promise對象
另外，mock.js里面，接口參數config獲取到的前端數據類型是字符串，需要轉為json格式，使用JSON.parse()進行轉換
十、.native修飾符
在做登出操作的時候，給退出登錄按鈕添加click事件，發現沒有效果

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item>我的消息</el-dropdown-item>
    <el-dropdown-item>設置</el-dropdown-item>
    <el-dropdown-item divided @click="loginOut">退出登錄</el-dropdown-item>
</el-dropdown-menu>

后來，在click后面加是.native才成功了
.native - 監聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。

關于“Element-UI如何使用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。