高清版思維導(dǎo)圖見(jiàn)后臺(tái)管理項(xiàng)目地址

1.login登錄頁(yè)面

< el-form >表單

在 Form 組件中，每一個(gè)表單域由一個(gè) Form-Item 組件構(gòu)成，表單域中可以放置各種類型的表單控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
Form 組件提供了表單驗(yàn)證的功能，只需要通過(guò) rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。

<el-form label-position="top" --【 對(duì)齊方式 （頂部對(duì)齊） 登錄-換行-input的形式】 label-width="80px" -- 【表單域標(biāo)簽的寬度。作為 Form 直接子元素的 form-item 會(huì)繼承該值。支持 auto】 :model="formdata" -- 【雙向數(shù)據(jù)綁定，表單數(shù)據(jù)對(duì)象】 class="login-form" :rules="rules" -- 【表單驗(yàn)證規(guī)則 ref="formdata" -- 【vue操作dom元素】 ><el-form-item label="用戶名" -- 【label是form-item的屬性】prop="username" -- 【設(shè)置為需校驗(yàn)的字段名】><el-inputv-model="formdata.username"placeholder="請(qǐng)輸入一個(gè)美麗的用戶名"prefix-icon="el-icon-s-custom"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="formdata.password" type="password"placeholder="請(qǐng)輸入密碼"prefix-icon="el-icon-s-goods" -- 【input標(biāo)簽內(nèi)使用圖標(biāo)】show-password --【可顯示密碼】></el-input></el-form-item> </el-form>

2.主頁(yè)home頁(yè)面

2.1< el-container > 布局容器

用于布局的容器組件，方便快速搭建頁(yè)面的基本結(jié)構(gòu)：

< el-container>：外層容器。當(dāng)子元素中包含 或 時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。

< el-header>：頂欄容器。

< el-aside>：側(cè)邊欄容器。

< el-main>：主要區(qū)域容器。

< el-footer>：底欄容器。

以上組件采用了 flex 布局，使用前請(qǐng)確定目標(biāo)瀏覽器是否兼容。此外，< el-container> 的子元素只能是后四者，后四者的父元素也只能是 < el-container>。

<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container> </el-container>

2.2 Layout 布局

通過(guò)基礎(chǔ)的 24 分欄，迅速簡(jiǎn)便地創(chuàng)建布局。
用于< el-header>

<el-row><el-col :span="4" -- 【柵格占據(jù)的列數(shù)】> </el-col><el-col :span="16"></el-col><el-col :span="4"></el-col> </el-row>

因此登錄頁(yè)面的【登錄】【重置】按鈕應(yīng)使用layout布局

<el-row justify="center" -- 【flex 布局下的水平排列方式】 type="flex" -- 【布局模式，可選 flex，現(xiàn)代瀏覽器下有效】 ><el-button type="primary" class="login-btn" @click="handleLogin('formdata')" >登錄</el-button><el-button @click="resetForm('formdata')" type="info" class="login-btn" >重置</el-button> </el-row>

2.3 < el-menu>導(dǎo)航菜單-側(cè)欄

導(dǎo)航菜單默認(rèn)為垂直模式，通過(guò)mode屬性可以使導(dǎo)航菜單變更為水平模式。另外，在菜單中通過(guò)submenu組件可以生成二級(jí)菜單。Menu 還提供了background-color、text-color和active-text-color，分別用于設(shè)置菜單的背景色、菜單的文字顏色和當(dāng)前激活菜單的文字顏色。

通過(guò)el-menu-item-group組件可以實(shí)現(xiàn)菜單進(jìn)行分組，分組名可以通過(guò)title屬性直接設(shè)定，也可以通過(guò)具名 slot 來(lái)設(shè)定。-- 在項(xiàng)目中未用到，因?yàn)椴藛问莿?dòng)態(tài)生成而非一一列舉的，

<el-aside class="aside" width="200px"><el-col :span="24"><el-menudefault-active="2" -- 【當(dāng)前激活菜單的 index】class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="teal"text-color="#fff"active-text-color="#ffff33":unique-opened= true -- 【是否只保持一個(gè)子菜單的展開(kāi)】:router= true -- 【是否使用 vue-router 的模式，啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)】><el-submenu -- 【啟用二級(jí)菜單】:index="item1.order.toString()" -- 【渲染一級(jí)菜單，index1~5】v-for="(item1,i) in menus" :key="item1.id"><template slot="title"> -- 【↖一級(jí)菜單】<i :class="iconlist[i]"></i><span>{{item1.authName}}</span></template><el-menu-item -- 【二級(jí)菜單】:index="item2.path" v-for="item2 in item1.children" :key="item2.id"><i class="el-icon-menu"></i><span>{{item2.authName}}</span></el-menu-item></el-submenu></el-menu></el-col> </el-aside>

2.4< el-main>

<el-main class="main"><router-view></router-view> </el-main>

2.5 < el-card>

將信息聚合在卡片容器中展示。

3. < el-main>–users/goods 用戶/商品列表頁(yè)面

3.1 面包屑

為了可復(fù)用，自定義組件 src/components/cuscom/myBread.vue

通過(guò)Prop向子組件傳遞數(shù)據(jù)
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行.當(dāng)然對(duì) props 傳遞的參數(shù)應(yīng)該添加一些驗(yàn)證規(guī)則；當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開(kāi)發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。

子組件： <template><!-- 面包屑 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首頁(yè)</el-breadcrumb-item><el-breadcrumb-item>{{level1}}</el-breadcrumb-item><el-breadcrumb-item>{{level2}}</el-breadcrumb-item></el-breadcrumb> </template> <script> export default {props: ['level1', 'level2'],name: 'my-bread' } </script> 父組件： <my-bread level1="商品管理" level2="商品列表"></my-bread>

3.2 搜索框

< el-input>

3.3 < el-table>列表

<el-table :data="userlist" height="450" border style="width: 100%;margin-top: 15px" ><el-table-column type="index" -- 【對(duì)應(yīng)列的類型。如果設(shè)置了 selection 則顯示多選框；如果設(shè)置了 index 則顯示該行的索引（從 1 開(kāi)始計(jì)算）；如果設(shè)置了 expand 則顯示為一個(gè)可展開(kāi)的按鈕】prop="id" -- 【對(duì)應(yīng)列內(nèi)容的字段名，表格使用在于數(shù)據(jù)配置】label="序號(hào)"width="50"></el-table-column><el-table-column prop="userlist" label="創(chuàng)建日期"><template slot-scope="userlist">{{userlist.row.create_time | fmtdate}}</template></el-table-column> </el-table>

3.3.1 el-switch狀態(tài)開(kāi)關(guān)

<el-switch v-model="userlist.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changeState(userlist.row)"> </el-switch>

3.3.2 按鈕el-button中使用icon

使用type、plain、round和circle屬性來(lái)定義 Button 的樣式。

<el-buttontype="danger"icon="el-icon-delete"size="small"circle @click="delUser(userlist.row.id)"></el-button>

3.3.3 表格 - 展開(kāi)行

通過(guò)設(shè)置 type=“expand” 和 Scoped slot 可以開(kāi)啟展開(kāi)行功能，el-table-column 的模板會(huì)被渲染成為展開(kāi)行的內(nèi)容，展開(kāi)行可訪問(wèn)的屬性與使用自定義列模板時(shí)的 Scoped slot 相同。

角色列表展開(kāi)效果：

！注意以下幾個(gè)el-table-column都是并列關(guān)系，展開(kāi)內(nèi)容就像是新增一列，但是現(xiàn)實(shí)效果展開(kāi)后表頭的下方。

<el-table :data="roleList" height="450" border style="width: 100%;margin-top: 15px"><el-table-column type="expand" prop="roleList">... 這里面是要展開(kāi)的內(nèi)容...</el-table-column><el-table-column type="index" prop="id" label="序號(hào)" width="80"></el-table-column><el-table-column prop="roleName" label="角色名稱" width="180"></el-table-column> </el-table>

3.3.4 tag標(biāo)簽

這里比較難的是結(jié)構(gòu)

<el-table-column type="expand" prop="roleList"><template slot-scope = "scope"><!-- 一級(jí) 一行兩列 --><span v-if="scope.row.children.length===0">該角色無(wú)權(quán)限</span><el-row v-for="(item1,i) in scope.row.children" :key="i"><!-- 第一列中放一級(jí)標(biāo)簽 --><el-col :span="4"><!-- 可移除標(biāo)簽，這里展示一級(jí)標(biāo)簽,綁定取消權(quán)限方法 --><el-tag closable @close="delRight(item1.id,scope.row)">{{item1.authName}}</el-tag></el-col><el-col :span="20"><!-- 第二列也是一行兩列 --><el-row v-for="(item2,index) in item1.children" :key="index"><!-- 第二行第一列中放二級(jí)標(biāo)簽 --><el-col :span="4"><el-tag type="success" closable @close="delRight(item2.id,scope.row)">{{item2.authName}}</el-tag></el-col><el-col :span="20"><el-tag @close="delRight(item3.id,scope.row)" closable type="warning" v-for="(item3,indexInner) in item2.children" :key="indexInner">{{item3.authName}}</el-tag></el-col></el-row></el-col></el-row></template> </el-table-column>

3.3.5 表格流體高度（滾動(dòng)條）

通過(guò)設(shè)置max-height屬性為 Table 指定最大高度。此時(shí)若表格所需的高度大于最大高度，則會(huì)顯示一個(gè)滾動(dòng)條。

3.3.6 Tree樹(shù)形控件

關(guān)鍵在于配置，和綁定請(qǐng)求到數(shù)據(jù)的屬性名,善用組件提供的方法

node-key的值，是treelist這個(gè)數(shù)據(jù)來(lái)源中的該值的key名
:default-expanded-keys=“allRoleId” 不需要forEach獲得所有id了，這一個(gè)屬性就完成所有功能
check-strictly在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false

<el-tree ref="mytree" default-expand-all :data="treelist" show-checkbox node-key="id" :default-checked-keys="checklistArr" :props="defaultProps"> </el-tree>

注意：

async confirmRole () {this.dialogFormVisibleRight = false// getCheckedKeys若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)的 key 所組成的數(shù)組// getHalfCheckedKeys若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前半選中的節(jié)點(diǎn)的 key 所組成的數(shù)組// 角色授權(quán)接口post roles/:roleId/rights請(qǐng)求體ridslet arr1 = this.$refs.mytree.getCheckedKeys()let arr2 = this.$refs.mytree.getHalfCheckedKeys()let arr = [...arr1, ...arr2]const res = await this.$http.post(`roles/${this.currentRoleId}/rights`, {rids: arr.join(',')})console.log('設(shè)置角色', res)this.getRoleList() } editRight (role) {this.dialogFormVisibleRight = truethis.checklist = role.childrenthis.currentRoleId = role.id// 這里只展示現(xiàn)有的功能this.getRightsList()// 將所有權(quán)限的id賦值給數(shù)組allRoleId// console.log('role', role)// console.log('checklist:', this.checklist)// 問(wèn)題：發(fā)現(xiàn)這里拿不到treelistvar tmpArr = []this.checklist.forEach(item1 => {// tmpArr.push(item1.id)var item2 = item1.childrenitem2.forEach(item2 => {// tmpArr.push(item2.id)var item3 = item2.childrenitem3.forEach(item3 => {tmpArr.push(item3.id)})})})this.checklistArr = tmpArr },

3.4 < el-pagination>分頁(yè)

<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryinfo.pagenum":page-sizes="[2, 5, 10, 15]":page-size="queryinfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"> </el-pagination>

4.商品管理

4.1 params分類參數(shù)

4.1.1 Alert 警告

<el-alerttitle="只允許為第三級(jí)分類設(shè)置參數(shù)"type="error"> </el-alert>

4.1.2 Cascader級(jí)聯(lián)選擇器

4.1.3 Tabs 標(biāo)簽頁(yè)

<el-form ref="form" label-width="80px" ><el-form-item label="商品名稱"> -- 【有form就有form-item】<el-cascader:show-all-levels="false"clearablev-model="value":options="options":props="{expandTrigger: 'hover', label: 'cat_name',value: 'cat_id',children: 'children'}"@change="handleChange"></el-cascader><el-tabs v-model="active" @tab-click="tabsHandleClick"><el-tab-pane label="動(dòng)態(tài)參數(shù)" name="1"></el-tab-pane><el-tab-pane label="靜態(tài)參數(shù)" name="2"></el-tab-pane></el-tabs></el-form-item> </el-form>

4.2 categories商品分類 - tree-grid樹(shù)形結(jié)構(gòu)

tree-grid 和table-column一樣使用
treeGrid

1.安裝包 2. <script> // 引入tree-grid var ElTreeGrid = require('element-tree-grid') export default {// 局部注冊(cè) 組件名<el-tree-grid>components: {ElTreeGrid} </script> 3. <el-table :data="options" border style="width: 100%"><el-tree-gridtreeKey="cat_id"parentKey="cat_pid"levelKey="cat_level"childKey="children"prop="cat_name"label="分類名稱"width="350"></el-tree-grid><el-table-columnprop="cat_deleted"label="是否有效"></el-table-column> </el-table>

4.3 添加商品

4.3.1 步驟條

<!-- 步驟條 樣式改變?nèi)Q于屬性active--><el-steps :active="parseInt(active)-1" finish-status="success" simple style="margin-top: 20px"><el-step title="基本信息" ></el-step><el-step title="商品參數(shù)" ></el-step><el-step title="商品屬性" ></el-step><el-step title="商品圖片" ></el-step><el-step title="商品內(nèi)容" ></el-step></el-steps>

4.3.2 縱向tabs標(biāo)簽頁(yè)

<!-- 縱向tabs標(biāo)簽頁(yè) 樣式改變?nèi)Q于屬性name/activeName--><!-- 最外層要用form包裹 --><el-form ref="form" :model="form" label-width="80px"><el-tabs tab-position="left" style="height:500px;margin-top: 20px;margin-bottom: 30px; overflow: scroll;"v-model="active" @tab-click="handleClick" ><el-tab-pane label="基本信息" name="1"><el-form-item label="商品名稱"><el-input v-model="form.goods_name"></el-input></el-form-item> </el-tab-pane><el-tab-pane label="商品參數(shù)" name="2"><!-- 商品參數(shù) 顯示動(dòng)態(tài)信息 checkbox多選框組 checkbox-group元素能把多個(gè) checkbox 管理為一組，只需要在 Group 中使用v-model綁定Array類型的變量即可。--></el-tab-pane><!-- 上傳圖片 upload組件 --><el-tab-pane label="商品圖片" name="4"><el-form-item label-width="auto"><el-uploadaction="http://47.105.184.7:8888/api/private/v1/upload":headers="header":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":file-list="fileList"list-type="picture"><el-button size="small" type="primary">點(diǎn)擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div></el-upload></el-form-item></el-tab-pane><el-tab-pane label="商品內(nèi)容" name="5"><el-form-item label-width="auto"><el-button type="primary" size="small" @click="addGoods">添加商品</el-button><!-- 富文本編輯器 vue-quill-editor --><quill-editor v-model="form.goods_introduce"></quill-editor></el-form-item></el-tab-pane></el-tabs></el-form>

4.3.3 el-upload上傳圖片

<el-tab-pane label="商品圖片" name="4"><el-form-item label-width="auto"><el-uploadaction="http://47.105.184.7:8888/api/private/v1/upload":headers="header":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":file-list="fileList"list-type="picture"><el-button size="small" type="primary">點(diǎn)擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div></el-upload></el-form-item> </el-tab-pane>

5.Dialog 對(duì)話框 - 彈框

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>這是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">確 定</el-button></span> </el-dialog>

6.導(dǎo)入

6.1 自定義組件 - 面包屑

myBread.vue

<template><!-- 面包屑 --><el-breadcrumb separator-class="el-icon-arrow-right" class="mybreadcrumb"><el-breadcrumb-item :to="{ path: '/' }">首頁(yè)</el-breadcrumb-item><el-breadcrumb-item>{{level1}}</el-breadcrumb-item><el-breadcrumb-item>{{level2}}</el-breadcrumb-item></el-breadcrumb> </template> <script> export default {props: ['level1', 'level2'],name: 'my-bread' } </script> <style scoped> .mybreadcrumb {margin-bottom: 15px; } </style>

main.js

import myBread from '@/components/cuscom/myBread.vue' Vue.component(myBread.name, myBread)

6.2 富文本編輯器

npm上搜 vue-quill-editor

npm install vue-quill-editor --save

html：

<quill-editor v-model="form.goods_introduce"></quill-editor>

js：（按需）局部注冊(cè)組件

mount with component // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'export default {components: {quillEditor} }

6.3 非element-UI的樹(shù)形結(jié)構(gòu)

npm搜索element-tree-grid

npm install element-tree-grid --save

html：
適用于< el-table>，可以直接像< el-table-column>一樣使用

<el-tree-gridtreeKey="cat_id"parentKey="cat_pid"levelKey="cat_level"childKey="children"prop="cat_name"label="分類名稱"width="350" > </el-tree-grid>

js：

var ElTreeGrid = require('element-tree-grid') export default {// 局部注冊(cè) 組件名<el-tree-grid>components: {ElTreeGrid} }

6.4 城市數(shù)據(jù)

html:

<el-cascader :options="citydata" > </el-cascader>

js：

import cityData from '@/assets/city_data2017_element.js' export default {data () {return {citydata: []}}

6.5 數(shù)據(jù)報(bào)表echarts

echarts文檔

6.5.1 安裝

npm install echarts --save

6.5.2 引入 ECharts

html:

<!-- 為echart準(zhǔn)備一個(gè)div容器 --> <div id="main" style="width: 600px;height:400px;"></div>

js:

var echarts = require('echarts') export default {data () {return {}},methods: {async useEchart () {// initvar myChart = echarts.init(document.getElementById('main'))const res = await this.$http.get(`reports/type/1`)// legend:// data: (5) ["華東", "華南", "華北", "西部", "其他"]// __proto__: Object// series: (5) [{…}, {…}, {…}, {…}, {…}]// xAxis: [{…}]// yAxis: [{…}]let option1 = {title: {text: '用戶來(lái)源'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#E9EEF3'}}},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true}}console.log('數(shù)據(jù)報(bào)表', res)let option2 = res.data.datalet option = {...option1, ...option2}console.log(option)// setOptionmyChart.setOption(option)}},mounted () {// 這里操作元素this.useEchart()} }

總結(jié)

以上是生活随笔為你收集整理的vue项目中所使用的element-UI / echarts的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。