當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue项目中所使用的element-UI / echarts

發布時間：2023/12/10 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue项目中所使用的element-UI / echarts 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

高清版思維導圖見后臺管理項目地址

1.login登錄頁面

< el-form >表單

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

<el-form label-position="top" --【對齊方式（頂部對齊）登錄-換行-input的形式】 label-width="80px" -- 【表單域標簽的寬度。作為 Form 直接子元素的 form-item 會繼承該值。支持 auto】 :model="formdata" -- 【雙向數據綁定，表單數據對象】 class="login-form" :rules="rules" -- 【表單驗證規則 ref="formdata" -- 【vue操作dom元素】 ><el-form-item label="用戶名" -- 【label是form-item的屬性】prop="username" -- 【設置為需校驗的字段名】><el-inputv-model="formdata.username"placeholder="請輸入一個美麗的用戶名"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="請輸入密碼"prefix-icon="el-icon-s-goods" -- 【input標簽內使用圖標】show-password --【可顯示密碼】></el-input></el-form-item> </el-form>

2.主頁home頁面

2.1< el-container > 布局容器

用于布局的容器組件，方便快速搭建頁面的基本結構：

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

< el-header>：頂欄容器。

< el-aside>：側邊欄容器。

< el-main>：主要區域容器。

< el-footer>：底欄容器。

以上組件采用了 flex 布局，使用前請確定目標瀏覽器是否兼容。此外，< 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 布局

通過基礎的 24 分欄，迅速簡便地創建布局。
用于< el-header>

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

因此登錄頁面的【登錄】【重置】按鈕應使用layout布局

<el-row justify="center" -- 【flex 布局下的水平排列方式】 type="flex" -- 【布局模式，可選 flex，現代瀏覽器下有效】 ><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>導航菜單-側欄

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

通過el-menu-item-group組件可以實現菜單進行分組，分組名可以通過title屬性直接設定，也可以通過具名 slot 來設定。-- 在項目中未用到，因為菜單是動態生成而非一一列舉的，

<el-aside class="aside" width="200px"><el-col :span="24"><el-menudefault-active="2" -- 【當前激活菜單的 index】class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="teal"text-color="#fff"active-text-color="#ffff33":unique-opened= true -- 【是否只保持一個子菜單的展開】:router= true -- 【是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉】><el-submenu -- 【啟用二級菜單】:index="item1.order.toString()" -- 【渲染一級菜單，index1~5】v-for="(item1,i) in menus" :key="item1.id"><template slot="title"> -- 【↖一級菜單】<i :class="iconlist[i]"></i><span>{{item1.authName}}</span></template><el-menu-item -- 【二級菜單】: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 用戶/商品列表頁面

3.1 面包屑

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

通過Prop向子組件傳遞數據
Vue 的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行.當然對 props 傳遞的參數應該添加一些驗證規則；當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制臺的警告。

子組件： <template><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首頁</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" -- 【對應列的類型。如果設置了 selection 則顯示多選框；如果設置了 index 則顯示該行的索引（從 1 開始計算）；如果設置了 expand 則顯示為一個可展開的按鈕】prop="id" -- 【對應列內容的字段名，表格使用在于數據配置】label="序號"width="50"></el-table-column><el-table-column prop="userlist" label="創建日期"><template slot-scope="userlist">{{userlist.row.create_time | fmtdate}}</template></el-table-column> </el-table>

3.3.1 el-switch狀態開關

<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屬性來定義 Button 的樣式。

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

3.3.3 表格 - 展開行

通過設置 type=“expand” 和 Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內容，展開行可訪問的屬性與使用自定義列模板時的 Scoped slot 相同。

角色列表展開效果：

！注意以下幾個el-table-column都是并列關系，展開內容就像是新增一列，但是現實效果展開后表頭的下方。

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

3.3.4 tag標簽

這里比較難的是結構

<el-table-column type="expand" prop="roleList"><template slot-scope = "scope"><span v-if="scope.row.children.length===0">該角色無權限</span><el-row v-for="(item1,i) in scope.row.children" :key="i"><el-col :span="4"><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"><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 表格流體高度（滾動條）

通過設置max-height屬性為 Table 指定最大高度。此時若表格所需的高度大于最大高度，則會顯示一個滾動條。

3.3.6 Tree樹形控件

關鍵在于配置，和綁定請求到數據的屬性名,善用組件提供的方法

node-key的值，是treelist這個數據來源中的該值的key名
:default-expanded-keys=“allRoleId” 不需要forEach獲得所有id了，這一個屬性就完成所有功能
check-strictly在顯示復選框的情況下，是否嚴格的遵循父子不互相關聯的做法，默認為 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若節點可被選擇（即 show-checkbox 為 true），則返回目前被選中的節點的 key 所組成的數組// getHalfCheckedKeys若節點可被選擇（即 show-checkbox 為 true），則返回目前半選中的節點的 key 所組成的數組// 角色授權接口post roles/:roleId/rights請求體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('設置角色', res)this.getRoleList() } editRight (role) {this.dialogFormVisibleRight = truethis.checklist = role.childrenthis.currentRoleId = role.id// 這里只展示現有的功能this.getRightsList()// 將所有權限的id賦值給數組allRoleId// console.log('role', role)// console.log('checklist:', this.checklist)// 問題：發現這里拿不到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>分頁

<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分類參數

4.1.1 Alert 警告

<el-alerttitle="只允許為第三級分類設置參數"type="error"> </el-alert>

4.1.2 Cascader級聯選擇器

4.1.3 Tabs 標簽頁

<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="動態參數" name="1"></el-tab-pane><el-tab-pane label="靜態參數" name="2"></el-tab-pane></el-tabs></el-form-item> </el-form>

4.2 categories商品分類 - tree-grid樹形結構

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

1.安裝包 2. <script> // 引入tree-grid var ElTreeGrid = require('element-tree-grid') export default {// 局部注冊組件名<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 步驟條

<el-steps :active="parseInt(active)-1" finish-status="success" simple style="margin-top: 20px"><el-step title="基本信息" ></el-step><el-step title="商品參數" ></el-step><el-step title="商品屬性" ></el-step><el-step title="商品圖片" ></el-step><el-step title="商品內容" ></el-step></el-steps>

4.3.2 縱向tabs標簽頁

<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="商品參數" name="2"></el-tab-pane><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">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div></el-upload></el-form-item></el-tab-pane><el-tab-pane label="商品內容" name="5"><el-form-item label-width="auto"><el-button type="primary" size="small" @click="addGoods">添加商品</el-button><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">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div></el-upload></el-form-item> </el-tab-pane>

5.Dialog 對話框 - 彈框

<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.導入

6.1 自定義組件 - 面包屑

myBread.vue

<template><el-breadcrumb separator-class="el-icon-arrow-right" class="mybreadcrumb"><el-breadcrumb-item :to="{ path: '/' }">首頁</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：（按需）局部注冊組件

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的樹形結構

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 {// 局部注冊組件名<el-tree-grid>components: {ElTreeGrid} }

6.4 城市數據

html:

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

js：

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

6.5 數據報表echarts

echarts文檔

6.5.1 安裝

npm install echarts --save

6.5.2 引入 ECharts

html:

<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: '用戶來源'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#E9EEF3'}}},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true}}console.log('數據報表', res)let option2 = res.data.datalet option = {...option1, ...option2}console.log(option)// setOptionmyChart.setOption(option)}},mounted () {// 這里操作元素this.useEchart()} }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： android 复制字符串,Cocos2
下一篇： java标书_java软件项目投标技术标