Element-UI如何使用

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

一、安裝好vue-cli腳手架之后
1、安裝Element-UI：
npm i element-ui -S
2、項(xiàng)目中 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，進(jìn)行柵格化處理，即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>

這些是外部的布局容器，定義內(nèi)部的小組件時(shí)，可以使用Element-UI提供的組件，比如NavMenu 導(dǎo)航菜單等等

三、側(cè)邊欄導(dǎo)航菜單的使用

<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">導(dǎo)航一</span>
        </template>
        <el-menu-item-group>
            <span slot="title">分組一</span>
            <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
            <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
            <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導(dǎo)航二</span>
    </el-menu-item>
</el-menu>

這樣子即可生成一個(gè)側(cè)邊導(dǎo)航，但是，每個(gè)導(dǎo)航會(huì)有一個(gè)標(biāo)題，很丑

只需要將
<el-menu-item-group>
    <span slot="title">分組一</span>
    <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
    <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
</el-menu-item-group>
改為
    <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
    <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
    即可，去掉分組一這個(gè)標(biāo)題

NavMenu 導(dǎo)航菜單參數(shù)說明：
<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：菜單是否折疊隱藏起來(只顯示圖標(biāo))，可以通過事件，取反這個(gè)值，從而實(shí)現(xiàn)折疊與展開
2、unique-opened：菜單子項(xiàng)，每次只展開一個(gè)子菜單
3、default-active：當(dāng)前激活菜單的 index
4、router：激活 vue-router 模式，使用index作為path進(jìn)行路由跳轉(zhuǎn)(默認(rèn)是使用to進(jìn)行路由導(dǎo)向)

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

五、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+"  ，會(huì)報(bào)錯(cuò)誤，需要綁定的屬性值是string類型，現(xiàn)在是number類型，解決辦法：使用隱式類型轉(zhuǎn)換，即" index+'' "   即可將index轉(zhuǎn)換為string類型
六、側(cè)邊導(dǎo)航，有的是有下拉列表的，有的是沒有的，所以需要在定義路由的時(shí)候，指明哪些是沒有下拉列表的，這里使用oneLeaf:true，表示該路由是沒有下拉列表的，循環(huán)的時(shí)候根據(jù)這個(gè)屬性進(jìn)行判斷，這里是遍歷：
<el-submenu>和<el-menu-item>，需要在最外面套一個(gè)template標(biāo)簽進(jìn)行循環(huán)，
<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 表格
用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作。

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

js部分的變動(dòng)：


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

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

label需要?jiǎng)討B(tài)綁定
登錄接口：
在login.vue里面，直接axios.post('/login').then()，會(huì)報(bào)錯(cuò)誤：Cannot read property 'then' of undefined
原因是mock.js里面的登錄接口，沒有返回promise對象
另外，mock.js里面，接口參數(shù)config獲取到的前端數(shù)據(jù)類型是字符串，需要轉(zhuǎn)為json格式，使用JSON.parse()進(jìn)行轉(zhuǎn)換
十、.native修飾符
在做登出操作的時(shí)候，給退出登錄按鈕添加click事件，發(fā)現(xiàn)沒有效果

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

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

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