Element-UI如何使用

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

創(chuàng)新互聯(lián)專(zhuān)注于網(wǎng)站建設(shè)，為客戶(hù)提供網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類(lèi)網(wǎng)站都可以開(kāi)發(fā)，品牌網(wǎng)站設(shè)計(jì)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢(qián)，價(jià)格優(yōu)惠，收費(fèi)合理。

一、安裝好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、注冊(cè)使用：
Vue.use(ElementUI)

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

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

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

五、index綁定的值的類(lèi)型必須是string類(lèi)型，不能是number類(lèi)型，和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>

直接寫(xiě):index="index+"  ，會(huì)報(bào)錯(cuò)誤，需要綁定的屬性值是string類(lèi)型，現(xiàn)在是number類(lèi)型，解決辦法：使用隱式類(lèi)型轉(zhuǎn)換，即" index+'' "   即可將index轉(zhuǎn)換為string類(lèi)型
六、側(cè)邊導(dǎo)航，有的是有下拉列表的，有的是沒(méi)有的，所以需要在定義路由的時(shí)候，指明哪些是沒(méi)有下拉列表的，這里使用oneLeaf:true，表示該路由是沒(méi)有下拉列表的，循環(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)類(lèi)似的數(shù)據(jù)，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。

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

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


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

<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里面的登錄接口，沒(méi)有返回promise對(duì)象
另外，mock.js里面，接口參數(shù)config獲取到的前端數(shù)據(jù)類(lèi)型是字符串，需要轉(zhuǎn)為json格式，使用JSON.parse()進(jìn)行轉(zhuǎn)換
十、.native修飾符
在做登出操作的時(shí)候，給退出登錄按鈕添加click事件，發(fā)現(xiàn)沒(méi)有效果

<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>

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

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

本文名稱(chēng)：Element-UI如何使用
本文URL：http://muchs.cn/article24/phoece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、電子商務(wù)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、App設(shè)計(jì)、定制開(kāi)發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)