vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例
更新時(shí)間：2019年03月06日 14:24:31 作者：小周sri的碼農(nóng)
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
前言
我們將會(huì)選擇使用一些 vue 周邊的庫vue-cli, vue-router,axios,moment,Element-ui搭建一個(gè)前端項(xiàng)目案例，后端數(shù)據(jù)接口，會(huì)使用json-server快速搭建一個(gè)本地的服務(wù)，方便對(duì)數(shù)據(jù)的增刪改查，
利用以上技術(shù)我們會(huì)搭建一個(gè)vue案例，效果展示圖：
以上就是我們最終要實(shí)現(xiàn)的全部效果，我會(huì)一塊一塊的講解，關(guān)于腳手架安裝和json-server搭建，在本次博客中，不會(huì)講解，如果想看的話，在小編的博客中，也有講解關(guān)于腳手架搭建和json-server搭建，如果想學(xué)習(xí)的話，可以看一下。
1.項(xiàng)目結(jié)構(gòu)展示
左邊第一個(gè)是前端項(xiàng)目結(jié)構(gòu)，第二個(gè)為json-server服務(wù)端
2.頁面搭建
在本次案例中，小編采用Element-ui快速搭建前端頁面，以提高效率。如果不了解的話，可以去官網(wǎng)看一下
2.1安裝element-ui
通過npm install element-ui -S 安裝前端ul框架，安裝完之后，并在main.js引入
import ElementUI from 'element-ui'<br> import 'element-ui/lib/theme-chalk/index.css'<br><br>Vue.use(ElementUI)
2.2頁面布局UserInfo.vue
直接通過element-ui中table布局，把整體建構(gòu)頁面布局完成，
<h1>用戶信息管理界面</h1>
<el-row>
<el-col :span="20" :push='2'>
<div>
<el-form :inline="true">
<el-form-item style="float: left" label="查詢用戶信息:">
<el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
</el-form-item>
</el-form>
</div>
<div class="table">
<el-table
:data="searchUserinfo(keyUser)"
border
style="width: 100%">
<el-table-column
type="index"
label="序號(hào)"
align="center"
width="60">
</el-table-column>
<el-table-column
label="日期"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ scope.row.date | moment}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
align="center"
width="100">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="郵箱"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="標(biāo)題"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="評(píng)價(jià)"
align="center"
width="200">
<template slot-scope="scope">
<span>{{ scope.row.evaluate }}</span>
</template>
</el-table-column>
<el-table-column
label="狀態(tài)"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.state }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
2.3頁面數(shù)據(jù)獲取并展示
通過axios請(qǐng)求本地搭建的服務(wù)數(shù)據(jù)，把得到的數(shù)據(jù)展示到頁面當(dāng)中。
也是通過cnpm install axios --save安裝并在main.js中引入
import axios from 'axios' Vue.prototype.$axios = axios
我們需要在方法methods中定義一個(gè)getUserInfo方法，用于請(qǐng)求數(shù)據(jù)
data () {
return {
tableData: [], 用于存放數(shù)據(jù)
}
}
getUserInfo() {
this.$axios.get('http://localhost:3000/data').then(res => {
this.tableData = res.data
})
},
這是時(shí)候，數(shù)據(jù)是請(qǐng)求到了，但是頁面并為展示，這就關(guān)系到vue的生命周期。如果對(duì)vue生命周期不是很了解的話，可以官網(wǎng)仔細(xì)看一遍，
我們只需要在created這個(gè)生命周期鉤子中，調(diào)用我們請(qǐng)求數(shù)據(jù)的方法就可以把數(shù)據(jù)展示到頁面中。這樣我們就完成第一步了，頁面數(shù)據(jù)請(qǐng)求展示created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
3.添加數(shù)據(jù)
剛才我們已經(jīng)完成第一步，把后臺(tái)的數(shù)據(jù)展示到前端頁面中，接下來我們對(duì)數(shù)據(jù)進(jìn)行添加，頁面全部都是用element搭建
3.1頁面結(jié)構(gòu)搭建，把AddUserInfo.vue組件當(dāng)成一個(gè)子組件，在父組件中引入這個(gè)子組件，點(diǎn)擊添加按鈕，彈出這個(gè)添加對(duì)話框
<template>
<div class="hello">
<el-dialog title="添加用戶信息" :visible.sync="dialogAdd.show">
<el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
<el-form-item label="日期" prop="date">
<el-date-picker
v-model="formDate.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="formDate.name"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="formDate.email"></el-input>
</el-form-item>
<el-form-item label="標(biāo)題" prop="title">
<el-input v-model="formDate.title"></el-input>
</el-form-item>
<el-form-item label="評(píng)價(jià)" prop="evaluate">
<el-input v-model="formDate.evaluate"></el-input>
</el-form-item>
<el-form-item label="狀態(tài)" prop="state">
<el-input v-model="formDate.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAdd.show = false">取 消</el-button>
<el-button type="primary" @click="dialogFormAdd('formdong')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
3.2我們?cè)诟附M件UserInfo中引入子組件AddUserInfo.vue,
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使用這個(gè)組件，
import AddUser from './AddUserInfo.vue' //引入組件
components:{ //注冊(cè)
AddUser,
}
3.3通過點(diǎn)擊父組件的添加按鈕觸發(fā)子組件彈出框
dialogAdd是我們?cè)诟附M件定義的的，需要傳遞給子組件，
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
在data定義用于是否彈出添加彈出框，默認(rèn)false不彈出，只有點(diǎn)擊添加按鈕的時(shí)候才彈出彈出框
dialogAdd:{
show:false
},
methods方法中
hanldeAdd(){ //添加
this.dialogAdd.show = true; //彈出對(duì)話框
},
3.4子組件需要接受父組件傳遞的方法.并請(qǐng)求數(shù)據(jù)。實(shí)現(xiàn)添加
<script>
export default {
name: 'AddUser',
props:{
dialogAdd:Object
},
data () {
return {
formDate:{
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
formrules:{
date:[{required:true,message:"日期不能為空",trigger:"blur"}],
name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
}
}
},
methods:{
dialogFormAdd(formdong) {
this.$refs[formdong].validate((valid) => {
if (valid) {
this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
this.$message({
type:"success",
message:"添加信息成功"
})
this.dialogAdd.show = false;
this.$emit('update');
})
this.formDate = ""
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
this.$emit('update'); 子組件數(shù)據(jù)發(fā)生改變了，父組件視圖卻沒有更新，這時(shí)候通過子創(chuàng)父，this.$emit,想父組件發(fā)送子組件傳遞的方法，
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> @update="getUserInfo" //接受子組件傳遞過來的方法去更新視圖
4.實(shí)現(xiàn)刪除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
刪除數(shù)據(jù)需要根據(jù)id去刪除，使用es6模板字符串進(jìn)行拼接
handleDelete(index,row) {
// 刪除用戶信息
this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
this.$message({
type:"success",
message:"刪除信息成功"
})
this.getUserInfo() //刪除數(shù)據(jù)，更新視圖
})
},
5.實(shí)現(xiàn)編輯功能
在這里添加彈出框內(nèi)容和編輯彈出框內(nèi)容一模一樣，可以選擇進(jìn)行封裝，封裝成一個(gè)組件，添加和編輯共同使用這一個(gè)組件，根據(jù)自定義一個(gè)字段來判斷點(diǎn)擊 的是添加還是編輯按鈕。在本次案例中，沒有封裝，如果想封裝的話，可以自己嘗試封裝組件，來提高效率。
5.1頁面搭建EditUser.vue組件，也是當(dāng)做一個(gè)子組件，在父組件中去引入這個(gè)子組件，并把獲取的數(shù)據(jù)展示到頁面中。
<template>
<div class="hello">
<el-dialog title="編輯用戶信息" :visible.sync="dialogEdit.show">
<el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
<el-form-item label="日期" prop="date">
<el-date-picker
v-model="form.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="標(biāo)題" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="評(píng)價(jià)" prop="evaluate">
<el-input v-model="form.evaluate"></el-input>
</el-form-item>
<el-form-item label="狀態(tài)" prop="state">
<el-input v-model="form.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdit.show = false">取 消</el-button>
<el-button type="primary" @click="dialogFormEdit('formEdit')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
在父組件中定義好需要傳遞的數(shù)據(jù)字段
dialogAdd:{ //編輯彈出框，默認(rèn)是false
show:false
},
form:{ //編輯信息
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
5.2也是在方法中點(diǎn)擊編輯按鈕，在編輯中，點(diǎn)擊拿一行，需要獲取那一行的字段數(shù)據(jù)，并把獲取的數(shù)據(jù)傳遞給子組件顯示到彈出框中，需要肯據(jù)row，來獲取每一行的數(shù)據(jù)。
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button<br>
handleEdit(index,row){ //編輯
this.dialogEdit.show = true; //顯示彈
this.form = {
date:row.date,
name:row.name,
email:row.email,
title:row.title,
evaluate:row.evaluate,
state:row.state,
id:row.id
}
},
當(dāng)我門打印row的是，就是點(diǎn)擊哪一行的編輯按鈕，對(duì)應(yīng)的數(shù)據(jù)就好打印出來，這時(shí)候我們只需要把得到的數(shù)據(jù)傳遞給子組件就行
5.3父組件得到的數(shù)據(jù)，子組件通過props接受，和添加數(shù)據(jù)幾乎一樣
<script>
export default {
name: 'HelloWorld',
props:{
dialogEdit:Object,
form:Object
},
data () {
return {
formrules:{
date:[{required:true,message:"日期不能為空",trigger:"blur"}],
name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
}
}
},
methods:{
dialogFormEdit(formEdit) {
this.$refs[formEdit].validate((valid) => {
if (valid) {
this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
this.$message({
type:"success",
message:"編輯信息成功"
})
console.log(res)
this.dialogEdit.show = false;
this.$emit('updateEdit') //更新父組件數(shù)據(jù)視圖
})
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
6查詢數(shù)據(jù)
<el-form-item style="float: left" label="查詢用戶信息:"> <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input> </el-form-item>
6.1需要定義一個(gè)查詢方法，通過filter對(duì)數(shù)組進(jìn)行過濾，并返回一個(gè)新的數(shù)據(jù)，最后通過es6中includes方法，判斷查詢的條件是否包含，includes如果包含就返回true，如果不包含就返回false
searchUserinfo(keyUser) {
return this.tableData.filter((user) => {
if(user.name.includes(keyUser)) {
return user
}
})
}
把定義好的方法，綁定到data,因?yàn)檫@個(gè)方法會(huì)返回一個(gè)新的數(shù)組
7.時(shí)間格式化
寫到這個(gè)案例已經(jīng)基本寫完了，還是一些細(xì)節(jié)需要修改，比如我我們添加日期，頁面顯示并不是我們想要的。我門只想要右邊的效果.
這時(shí)候推薦一個(gè)日期格式化插件moment.js,可以快速幫我們解決這個(gè)問題
7.1通過npm install moment --save下載
在main.js引入
import moment from 'moment'
我們定義一個(gè)全局過濾的filter,無論在那個(gè)組件都可以使用，主要調(diào)用moment
//獲取年份
Vue.filter('moment', function (value, formatString) {
formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
});
8.全部代碼
8.1UserInfo.vue組件代碼
<template>
<div class="info">
<h1>用戶信息管理界面</h1>
<el-row>
<el-col :span="20" :push='2'>
<div>
<el-form :inline="true">
<el-form-item style="float: left" label="查詢用戶信息:">
<el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
</el-form-item>
</el-form>
</div>
<div class="table">
<el-table
:data="searchUserinfo(keyUser)"
border
style="width: 100%">
<el-table-column
type="index"
label="序號(hào)"
align="center"
width="60">
</el-table-column>
<el-table-column
label="日期"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ scope.row.date | moment}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
align="center"
width="100">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="郵箱"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="標(biāo)題"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="評(píng)價(jià)"
align="center"
width="200">
<template slot-scope="scope">
<span>{{ scope.row.evaluate }}</span>
</template>
</el-table-column>
<el-table-column
label="狀態(tài)"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.state }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
<EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
</div>
</template>
<script>
import AddUser from './AddUser.vue'
import EditUser from './EditUser.vue'
export default {
name: 'info',
data () {
return {
tableData:[],
dialogEdit:{
show:false,
},
dialogAdd:{
show:false
},
keyUser:"",
form:{ //編輯信息
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
}
},
methods:{
getUserInfo() {
this.$axios.get('http://localhost:3000/data').then(res => {
console.log(res)
this.tableData = res.data
})
},
hanldeAdd(){ //添加
this.dialogAdd.show = true;
},
handleEdit(index,row){ //編輯
this.dialogEdit.show = true; //顯示彈
this.form = {
date:row.date,
name:row.name,
email:row.email,
title:row.title,
evaluate:row.evaluate,
state:row.state,
id:row.id
}
console.log(row)
},
handleDelete(index,row) {
// 刪除用戶信息
this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
this.$message({
type:"success",
message:"刪除信息成功"
})
this.getUserInfo() //刪除數(shù)據(jù)，更新視圖
})
},
searchUserinfo(keyUser) {
return this.tableData.filter((user) => {
if(user.name.includes(keyUser)) {
return user
}
})
}
},
created(){
this.getUserInfo()
},
components:{
AddUser,
EditUser
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
font-size: 30px;
color: #333;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
border-bottom: 2px solid #409EFF;
width: 300px
}
</style>
8.2AddUserInfo.vue組件
<template>
<div class="hello">
<el-dialog title="添加用戶信息" :visible.sync="dialogAdd.show">
<el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
<el-form-item label="日期" prop="date">
<el-date-picker
v-model="formDate.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="formDate.name"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="formDate.email"></el-input>
</el-form-item>
<el-form-item label="標(biāo)題" prop="title">
<el-input v-model="formDate.title"></el-input>
</el-form-item>
<el-form-item label="評(píng)價(jià)" prop="evaluate">
<el-input v-model="formDate.evaluate"></el-input>
</el-form-item>
<el-form-item label="狀態(tài)" prop="state">
<el-input v-model="formDate.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAdd.show = false">取 消</el-button>
<el-button type="primary" @click="dialogFormAdd('formdong')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'AddUser',
props:{
dialogAdd:Object
},
data () {
return {
formDate:{
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
formrules:{
date:[{required:true,message:"日期不能為空",trigger:"blur"}],
name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
}
}
},
methods:{
dialogFormAdd(formdong) {
this.$refs[formdong].validate((valid) => {
if (valid) {
this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
this.$message({
type:"success",
message:"添加信息成功"
})
this.dialogAdd.show = false;
this.$emit('update');
})
this.formDate = ""
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
8.3EditUser.vue編輯組件
<template>
<div class="hello">
<el-dialog title="編輯用戶信息" :visible.sync="dialogEdit.show">
<el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
<el-form-item label="日期" prop="date">
<el-date-picker
v-model="form.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="標(biāo)題" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="評(píng)價(jià)" prop="evaluate">
<el-input v-model="form.evaluate"></el-input>
</el-form-item>
<el-form-item label="狀態(tài)" prop="state">
<el-input v-model="form.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdit.show = false">取 消</el-button>
<el-button type="primary" @click="dialogFormEdit('formEdit')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
dialogEdit:Object,
form:Object
},
data () {
return {
formrules:{
date:[{required:true,message:"日期不能為空",trigger:"blur"}],
name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
}
}
},
methods:{
dialogFormEdit(formEdit) {
this.$refs[formEdit].validate((valid) => {
if (valid) {
this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
this.$message({
type:"success",
message:"編輯信息成功"
})
console.log(res)
this.dialogEdit.show = false;
this.$emit('updateEdit')
})
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
以上這次全部的案例deom,在過程中有些說的不是很好，請(qǐng)見諒，如果喜歡，請(qǐng)多多關(guān)注
相關(guān)文章
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案
這篇文章主要介紹了vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue element-ui 綁定@keyup事件無效的解決方法
遇到vue element-ui 綁定@keyup事件無效的問題怎么解決？下面小編就為大家分享一篇vue element-ui 綁定@keyup事件無效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過示例代碼詳細(xì)講解,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue--vuex的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue將el-table導(dǎo)出為excel文件的實(shí)現(xiàn)方法
在 Vue + Element UI 中,el-table 數(shù)據(jù)導(dǎo)出 Excel 文件,可以使用 xlsx（SheetJS）庫進(jìn)行處理,以下是詳細(xì)的實(shí)現(xiàn)方法,包括安裝依賴、代碼示例和優(yōu)化建議,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了element vue validate驗(yàn)證名稱重復(fù) 輸入框與后臺(tái)重復(fù)驗(yàn)證 特殊字符 字符長(zhǎng)度 及注意事項(xiàng)小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)通過手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼
本文主要介紹了vue實(shí)現(xiàn)通過手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧