欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Element-UI如何使用-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比西陵網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式西陵網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們,業(yè)務覆蓋西陵地區(qū)。費用合理售后完善,十多年實體公司更值得信賴。

一、安裝好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>

這樣子即可生成一個側邊導航,但是,每個導航會有一個標題,很丑
Element-UI如何使用

只需要將
<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 導航菜單參數(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:菜單是否折疊隱藏起來(只顯示圖標),可以通過事件,取反這個值,從而實現(xiàn)折疊與展開
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類型,現(xiàn)在是number類型,解決辦法:使用隱式類型轉換,即" index+'' "  即可將index轉換為string類型
六、側邊導航,有的是有下拉列表的,有的是沒有的,所以需要在定義路由的時候,指明哪些是沒有下拉列表的,這里使用oneLeaf:true,表示該路由是沒有下拉列表的,循環(huán)的時候根據(jù)這個屬性進行判斷,這里是遍歷:
<el-submenu>和<el-menu-item>,需要在最外面套一個template標簽進行循環(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 表格
用于展示多條結構類似的數(shù)據(jù),可對數(shù)據(jù)進行排序、篩選、對比或其他自定義操作。

<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:以設置了該屬性的列為基準進行排序
3、formatter:用于格式化指定列的值,接受一個Function,會傳入兩個參數(shù):row和column,可以根據(jù)自己的需求進行處理。
4、page-size:每頁顯示條目個數(shù),支持 .sync 修飾符
5、total:總條目數(shù)
6、current-page:當前頁數(shù),支持 .sync 修飾符
八、表格分頁
在data里面設置total、page-size、current-page等屬性,然后綁定在el-pagination組件上,然后通過這些屬性來過濾或篩選總數(shù)據(jù)tableData3,即可實現(xiàn)分頁
首頁是給el-table部分綁定數(shù)據(jù):如圖
Element-UI如何使用
js部分的變動:
Element-UI如何使用
Element-UI如何使用
九、
增加用戶接口:通過參數(shù)傳入新增的用戶數(shù)據(jù),push到模擬的用戶數(shù)據(jù)的數(shù)組里,然后返回一個200給前臺,新增成功
刪除用戶接口:通過前臺傳入的用戶id,在接口處,篩選出不等于這個id的所有數(shù)據(jù),然后返回給前臺,即表示刪除了這個id對應的用戶數(shù)據(jù),通過filter方法
編輯用戶數(shù)據(jù)接口:通過前臺傳入的id參數(shù),利用some方法,篩選出對應的用戶數(shù)據(jù),然后更改這個用戶數(shù)據(jù),將所有的值更改為前臺傳入的參數(shù)
編輯用戶界面和增加用戶界面是一樣的,通過this.editform = Object.assign({},row),將當前行的用戶數(shù)據(jù),直接拷貝到打開的編輯界面上,有一個問題,只有姓名、年齡和地址傳過去了,性別和生日日期沒有,這里需要做下修改:

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

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

<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 - 監(jiān)聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。

文章名稱:Element-UI如何使用-創(chuàng)新互聯(lián)
文章分享:http://www.chinadenli.net/article30/psepo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版面包屑導航定制網(wǎng)站全網(wǎng)營銷推廣網(wǎng)站設計公司靜態(tài)網(wǎng)站

廣告

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

成都網(wǎng)站建設