vueelementui官网（vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据）

本文目录

• vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据
• 在Vue中如何使用elementUI实现自定义主题方法
• 如何利用vue+vue-router+elementUI实现简易通讯录
• element ui是什么

vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据

标签页请求，切换进去会请求该页的数据
如果页面一加载就请求出所有的数据，会造成数据堵塞，对性能有很大的影响
所以要在tabs标签页点击切换 的时候发起相应的网络请求，用到的是 tab-click 事件。

1.渲染出页面时默认显示第一页
2.切换tab时，加载此页数据

tab-click标签事件：tab 被选中时触发，他的返回值是被选中的标签 tab 实例
tab 和 event两个参数打印一下显示如下：

tab 的参数里有个 index 值，可以作为标签页切换的索引
tab 的参数里有个label，也可以作为切换标签的判断条件
也可以使用activeName。

通过上述明确事件，参数后，修改如下进行实例操作

elementUI官网
参考

在Vue中如何使用elementUI实现自定义主题方法

下面我就为大家分享一篇Vue的elementUI实现自定义主题方法，具有很好的参考价值，希望对大家有所帮助。
使用vue开发项目，用到elementUI，根据官网的写法，我们可以自定义主题来适应我们的项目要求，下面来介绍一下两种方法实现的具体步骤，（可以参考官方文档自定义主题官方文档），先说项目中没有使用scss编写，用主题工具的方法（使用的较多）
第一种方法：使用命令行主题工具
使用vue-cli安装完项目并引入element-ui（具体可参考第二种方法中的介绍）
一、安装工具
1，安装主题工具
npm i element-theme -g2，安装chalk主题，可以从 npm 安装或者从 GitHub 拉取最新代码
# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
***隐藏网址***
et -i
》 ? Generator variables file这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
...三、修改变量
直接 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 紫色（purple））
$--color-primary: purple;四、编译主题
修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）
et
》 ? build theme font
》 ? build element theme五、引入自定义主题
最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入
import ’../theme/index.css’
import ElementUI from ’element-ui’
import Vue from ’vue’
Vue.use(ElementUI)在项目中写些样式，看下主题色是否改变：（主题色变为紫色）
《p》
《el-button》默认按钮《/el-button》
《el-button type="primary"》主要按钮《/el-button》
《el-button type="success"》成功按钮《/el-button》
《el-button type="info"》信息按钮《/el-button》
《el-button type="warning"》警告按钮《/el-button》
《el-button type="danger"》危险按钮《/el-button》
《/p》第二种方法： 直接修改element样式变量
在项目中直接修改element的样式变量，（前提是你的文档也是使用scss编写）
一、首先用vue-cli安装一个新项目：
1，安装vue:
npm i -g vue2，在项目目录下安装vue-cli：
npm i -g vue-cli3，基于webpack建立新项目（ vue-project）
vue init webpack vue-project4，依次输入以下命令行，运行vue-project
cd vue-project
npm i
npm run dev二、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件)
1,安装element-ui
npm i element-ui -S2,安装sass-loader，node-sass
npm i sass-loader node-sass -D在这里说一下，不需要配置webpack.base.conf.js文件,vue-loader会根据不同类型文件来配置相应loader来打包我们的样式文件（感兴趣的可看下vue-loader的核心代码）
三、改变element样式变量
1.在src下建立element-variables.scss文件（名字可以自定义），写入如下代码：
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: ’../node_modules/element-ui/lib/theme-chalk/fonts’;
@import "../node_modules/element-ui/packages/theme-chalk/src/index";2.在入口文件main.js中引入上面的文件即可
import Vue from ’vue’
import Element from ’element-ui’
import ’./element-variables.scss’
Vue.use(Element)看下效果吧，在文件里引入些样式看看，如button
《p》
《el-button》默认按钮《/el-button》
《el-button type="primary"》主要按钮《/el-button》
《el-button type="success"》成功按钮《/el-button》
《el-button type="info"》信息按钮《/el-button》
《el-button type="warning"》警告按钮《/el-button》
《el-button type="danger"》危险按钮《/el-button》
《/p》默认的颜色已经变为我们自定义的了，有其他的改变在element-variable.scss文件中改变变量即可
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何使用ngrok+express解决微信接口调试问题
如何使用vue-cli编写vue插件
在vue-cli下使用vuex（详细教程）

如何利用vue+vue-router+elementUI实现简易通讯录

一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。
***隐藏网址***
1. 所用技术
***隐藏网址***
***隐藏网址***
脚手架: vue-cli
***隐藏网址***
模块打包: webpack
2. 脚手架搭建
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack contact
$ cd contact
# 安装依赖
$ npm install
$ npm run dev
这是vue官方基于webpack的脚手架，run dev后浏览器会自动打开localhost:8080,也可以使用run build命令，执行build命令后会自动将src目录中的内容进行编译打包压缩，然后在dist目录中可以看到这些文件
3. 目录结构
项目根目录：
build为构建项目所用的node代码，config为构建时的一些配置项，dist为打包后(npm run build 用于发布)的代码，node_modules为node模块，src为开发时所用的代码。
src目录：
assets为全局css,图片,以及一些工具类的js，components为vue的组件，router为路由配置，app.vue为主页面的组件，config.js为目录配置项，main.js为入口js
4. main.js
import Vue from ’vue’
import App from ’./App.vue’
import router from ’./router’
import ElementUI from ’element-ui’
import utils from ’./assets/utils.js’
import ’element-ui/lib/theme-chalk/index.css’
import ’./assets/normalize.css’
Vue.use(ElementUI)
Vue.use(utils)
/* eslint-disable no-new */
new Vue({
el: ’#app’,
router,
ElementUI,
template: ’《App/》’,
components: { App }
})
main.js的主要工作是引入一些框架，全局css，以及工具函数，还会处理vue组件的加载，最后实例化vue。
5. App.vue
***隐藏网址***
App.vue可以认为是应用最外层的一个容器。
《template》
《div id="app"》
《div class="app-left"》
《el-row class="tac"》
《el-col》
《el-menu :default-active="menuIndex" class="el-menu-vertical-demo"
background-color="#545c64" text-color="#fff" :unique-opened="menuUniqueOpen" :router="menuRouter"
active-text-color="#ffd04b"》
《h3》我的应用《/h3》
《template v-for="(item, index) in menuData"》
《!-- 此处的index需显示转换为string，否则会报warn --》
《el-submenu :index="’’ + (index + 1)"》
《template slot="title"》{{ item.name }}《/template》
《template v-for="(subItem, i) in item.value"》
《!-- 此处index格式为父级的index加上下划线加上当前的index，index都需加1 --》
《router-link tag="span" :to="subItem.path"》
《el-menu-item :index="subItem.name"》{{ subItem.title }}《/el-menu-item》
《/router-link》
《/template》
《/el-submenu》
《/template》
《/el-menu》
《/el-col》
《/el-row》
《/div》
《div class="app-right"》
《router-view》《/router-view》
《/div》
《/div》
《/template》
《script》
import menuData from ’./config’
export default {
name: ’app’,
data () {
return {
menuData,
menuIndex: ’’, // 菜单当前所在位置
menuUniqueOpen: true, // 菜单项是否唯一开启
menuRouter: true // 是否开启路由模式
}
},
mounted: function () {
...
},
watch: {
’$route’ (to) {
this.menuIndex = to.name
}
}
}
《/script》
这边偷了一个懒，没有把左侧的menu单独做成一个vue而是混入App.vue中。
6. 路由
在正式写代码之前，首先要确定要项目的结构，模块如何划分，哪个模块对应哪个路由。
因为整个项目现在就划分出两个大板块，通讯录与记账本，所以路由第一级就只有contact和account两种。
Vue.use(VueRouter)
let myRouter = new VueRouter({
routes: [
{
path: ’*’,
component: () =》 import(’../components/NotFoundComponent.vue’)
},
{
path: ’/’,
redirect: ’/contact’
},
{
path: ’/contact’,
name: ’Contact’,
component: () =》 import(’../components/contact/List.vue’)
},
{
path: ’/contact/edit’,
name: ’Contact’,
component: () =》 import(’../components/contact/Edit.vue’)
},
{
path: ’/account’,
name: ’Account’,
component: () =》 import(’../components/account/list.vue’)
}
]
})
可以看到上面/contact和/contact/edit的name是相同的，这是为了让在新增或者联系人页面下，还能让active状态停留在左侧我的联系人上，可以看到App.vue中的代码this.menuIndex = to.name就是进行的该操作，
虽然这样vue会报一个warn告诉我别重名，暂时能想到的就是这样的操作方式了，有考虑过依靠判断path来确定是否显示高亮状态，但是当目录层级较深且较复杂的情况下，这样就不是很靠谱了。
component这里为什么是这种形式，而不是直接用一个组件名呢，因为当路由开始多起来的时候，一下把所有的组件都加载进来会非常非常慢且会加载到许多当时并没有用到的组件，通过import这种形式，可以让webpack将路由变换时用到的组件分开打包，网页会根据使用情况再进行
由于router是vue的组件，所以使用时记得要Vue.use一下。
7. 联系人列表页 --- contact/list.vue
《template》
《div class="contact-list"》
《div class="contact-list-header"》
《el-button @click="goToNew" type="primary"》新增联系人《/el-button》
《/div》
《div class="contact-list-content"》
《template》
《div class="contact-list-wrap"》
《h3》高级检索《/h3》
《el-form ref="contactSearch" :model="searchParams" :inline=true》
《el-form-item label="姓名"》
《el-input v-model="searchParams.name" placeholder="请输入需要检索的姓名"》《/el-input》
《/el-form-item》
《/el-form》
《el-button type="primary" size="mini" round @click="contactSearch(’contactSearch’)"》搜索《/el-button》
《/div》
《div class="contact-list-wrap"》
《h3》联系人列表《/h3》
《el-table
:data="listNewData"
style="width: 100%"
@row-click="viewContact"
:default-sort="{prop: ’name’, order: ’descending’}"
》
《el-table-column
label="姓名"
prop="name"
sortable
width="180"》
《/el-table-column》
...
《el-table-column
label="功能"》
《template scope="scope"》
《el-button size="mini" type="primary" @click.stop="editContact(scope)"》《/el-button》
《el-button size="mini" @click.stop="deleteContact(scope)"》删除《/el-button》
《/template》
《/el-table-column》
《/el-table》
《/div》
《/template》
《/div》
《contact-view ref="contactView" :viewData="curData" :viewShow.sync="viewShow"》《/contact-view》
《/div》
《/template》
《script》
import contactView from ’./View.vue’
export default {
data () { ... },
components: {
contactView
},
computed: {
listNewData: function () { ... },
mounted: function () {
this.listData = this.utils.getLocalStorage(’vueContact’)
},
methods: {
goToNew: function () {
this.$router.push(’/contact/edit’)
},
sexFormatter: function (row) { ... },
deleteContact: function (res) {
let data = res.row
this.$confirm(’此操作将永久删除该联系人, 是否继续?’, ’提示’, {
confirmButtonText: ’确定’,
cancelButtonText: ’取消’,
type: ’warning’,
callback: (action) =》 {
if (action === ’confirm’) {
this.$delete(this.listData, data.id)
this.utils.setLocalStorage(’vueContact’, this.listData)
}
}
})
},
editContact: function (res) {
let data = res.row
this.$router.push({
path: ’/contact/edit’, query: {id: data.id}
})
},
viewContact: function (row) {
this.viewShow = true
this.curData = this.listData
},
contactSearch: function () {
let data = this.utils.getLocalStorage(’vueContact’)
let newData = {}
for (let item in data) {
if (data.name.indexOf(this.searchParams.name) 》 -1) {
newData
}
}
this.listData = newData
}
}
}
《/script》
list.vue相当于该模块的主页，新增与页面通过右上角的新建按钮或者列表中的按钮进入，查看页面通过引入View.vue作为一个弹窗放在列表页中展示，不单独设置路由。
列表展示所使用的是elementUI的table组件
删除对象时一定要使用$delete，否则不会触发视图更新
view.vue代码：
《template》
《div class="contact-view"》
《el-dialog :before-close="closePop" ref="myDialog" :visible="viewShow"》
《el-form :model="viewData" label-width="60px"》
《el-form-item label="姓名" prop="name"》
《el-input :readonly="true" v-model="viewData.name"》《/el-input》
《/el-form-item》
...
《el-form-item label="备注"》
《el-input :readonly="true" type="textarea" v-model="viewData.desc"》《/el-input》
《/el-form-item》
《/el-form》
《/el-dialog》
《/div》
《/template》
《script》
export default {
props: ,
methods: {
closePop: function () {
// 需手动关闭弹窗,找到父组件中调用的地方进行事件的触发
this.$parent.$refs.contactView.$emit(’update:viewShow’, false)
}
}
}
《/script》
这里有个比较值得注意的点，就是关闭查看弹窗，弹窗的开启关闭状态通过list也就是父级中的viewShow来控制，viewShow通过view也就是子级中的props流入到子级中，但是vue中的数据流向是默认是单向的，想要子级中修改父级属性必须使用emit，详见上面代码。
这里原先使用elementUI的dialog组件的自己的关闭，会报错，只能自己修改了。
ps: 为什么这里不用vuex处理父子组件的通信？因为如果是一个大型的后台管理系统，像这样的情况会经常发生，如果都放在vuex中管理，那vuex的体积会非常庞大，反而不利于维护。
8. 联系人(新增)页 --- edit.vue
《template》
《div class="contact-edit"》
《el-form ref="contactForm" :model="form" :rules="rules" label-width="80px"》
《el-form-item label="姓名" prop="name"》
《el-input v-model="form.name"》《/el-input》
《/el-form-item》
《el-form-item label="性别"》
《el-select v-model="form.sex" placeholder="请选择性别"》
《el-option label="男" value="male"》《/el-option》
《el-option label="女" value="female"》《/el-option》
《/el-select》
《/el-form-item》
...
《el-form-item label="备注"》
《el-input type="textarea" v-model="form.desc"》《/el-input》
《/el-form-item》
《el-form-item》
《el-button type="primary" @click="onSubmit(’contactForm’)"》{{ btnName }}《/el-button》
《el-button @click="cancelForm"》取消《/el-button》
《/el-form-item》
《/el-form》
《/div》
《/template》
《script》
export default {
data () {
var nameValid = (rule, val

element ui是什么

elementui是一款基于于VUE的一套UI组件库。它能够提供丰富的PC组件，有效地降低了使用者的开发难度。vue具有以下三大特点：
1.遵循MVVM模式
VUR中的MVVM模式具有简单、灵活的API，能够将视图UI和业务逻辑分开来，实现响应式的数据绑定和可组合的视图。
2.指令化
vue的指令有内置指令和自定义指令并且可以把指令放在元素上。
3.插件化
插件是用来增强技术栈的功能模块，vue可以使用插件将功能进行拓展。