1. 環(huán)境準(zhǔn)備
-
初始化Vue項(xiàng)目
vue init webpack
-
安裝elementUI
npm i element-ui -S
-
運(yùn)行項(xiàng)目
npm run dev
2. 使用
①：在main.js中引入elementUI組件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
②：創(chuàng)建一個(gè)組件
User.vue
③：創(chuàng)建一個(gè)路由引入組件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/user/list',
name: 'User',
component: User
}
]
})
此時(shí)開啟服務(wù)：npm run dev 可以通過localhost：8080/user/list系忙；來訪問組件了泽论，但此時(shí)還是空的廷蓉！沒有任何內(nèi)容撬即！
④：在組件中創(chuàng)建一個(gè)表格
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
可以看出數(shù)據(jù)來源tableData
3.Mockjs模擬數(shù)據(jù)
-
安裝mokejs
npm install mockjs
-
新建一個(gè)user.js文件，用來模擬后臺(tái)數(shù)據(jù)
-
是用commonjs的方式引入
let mock = require("mockjs") -
模擬數(shù)據(jù)，具體規(guī)則參考官網(wǎng)文檔,或者從網(wǎng)上復(fù)制
let data = Mock.mock({ "user|30": [{ // 隨機(jī)生成1到3個(gè)數(shù)組元素 'name': '@cname', // 中文名稱 'id|+1': 88, // 屬性值自動(dòng)加 1，初始值為88 'age|18-28': 0, // 18至28以內(nèi)隨機(jī)整數(shù), 0只是用來確定類型 'birthday': '@date("yyyy-MM-dd")', // 日期 'city': '@city(true)', // 中國(guó)城市 'color': '@color', // 16進(jìn)制顏色 }] })
-
-
數(shù)據(jù)有了，如何返回在表格中展示呢或衡？需要用到axios發(fā)送ajax請(qǐng)求，mockjs攔截ajax請(qǐng)求车遂，并把數(shù)據(jù)返回回去封断！
-
安裝axios
npm install axios --save
-
在main.js中引入
import axios from 'axios'
-
配置全局屬性，掛靠在原型上舶担，在任意組件內(nèi)都可以使用this.$http獲得axios對(duì)象
Vue.prototype.$http = axios
-
-
發(fā)送axios請(qǐng)求來獲取數(shù)據(jù),寫在methods屬性內(nèi)
-
在User.vue組件中引入user.js
import 'user'
發(fā)送axios請(qǐng)求
<script> import 'user' export default { data() { return { tableData: [] } }, methods:{ loadList(){ this.$http.post('user/list').then(res=>{ //返回的數(shù)據(jù)賦值給tableData表格中 this.tableData = res }).catch() } } } </script>- mockjs攔截ajax請(qǐng)求返回?cái)?shù)據(jù)
let Mock = require("mockjs") let list = Mock.mock({ "user|30": [{ // 隨機(jī)生成1到3個(gè)數(shù)組元素 'name': '@cname', // 中文名稱 'id|+1': 88, // 屬性值自動(dòng)加 1坡疼，初始值為88 'age|18-28': 0, // 18至28以內(nèi)隨機(jī)整數(shù), 0只是用來確定類型 'birthday': '@date("yyyy-MM-dd")', // 日期 'city': '@city(true)', // 中國(guó)城市 'color': '@color', // 16進(jìn)制顏色 }] }) //console.debug(data) Mock.mock('/user/list','post',function (option) { return{ list:list } })- 什么時(shí)候執(zhí)行l(wèi)oadList函數(shù)來獲取數(shù)據(jù)呢，在頁面加載完成后衣陶，使用mounted函數(shù)柄瑰，它可以在頁面渲染完畢后闸氮，執(zhí)行其中的內(nèi)容！
import User from '../js/user' export default { name:'User', data() { return { tableData: [] } }, methods:{ loadList(){ this.$http.post('user/list').then(res=>{ //返回的數(shù)據(jù)賦值給tableData表格中 console.debug(res) //this.tableData = res.list }) }, }, mounted(){ //當(dāng)頁面加載完畢的時(shí)候發(fā)送ajax請(qǐng)求 this.loadList(); } } -
4. 分頁
- 首先準(zhǔn)備一個(gè)分頁條
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
@size-change是綁定了一個(gè)改變事件教沾，在頁面中如果我們改變了每頁的大小蒲跨，它應(yīng)該動(dòng)態(tài)的展示相應(yīng)大小的數(shù)據(jù)
：是v-blind的簡(jiǎn)寫形式，動(dòng)態(tài)的綁定一個(gè)屬性授翻，當(dāng)這個(gè)屬性發(fā)生改變的時(shí)候或悲，他也會(huì)隨著發(fā)生改變
- 動(dòng)態(tài)獲取分頁數(shù)據(jù)
上面的數(shù)據(jù)都是寫死了，現(xiàn)在要?jiǎng)討B(tài)的獲取數(shù)據(jù)堪唐，怎么做呢巡语？我們知道每頁大小和當(dāng)前頁都是可以改變的，此時(shí)綁定一個(gè)屬性淮菠，使用data這個(gè)函數(shù)來返回我們需要的數(shù)據(jù)男公！
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20, 25,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
data() {
return {
tableData: [],
currentPage:1,
pageSize:10,
total:total,
}
}
data函數(shù)返回的是一個(gè)json字符串，此時(shí)界面就會(huì)根據(jù)這個(gè)綁定的數(shù)據(jù)來渲染合陵！我們給當(dāng)前頁和頁面大小一個(gè)默認(rèn)數(shù)據(jù)理澎！在loadList這個(gè)函數(shù)中，它本身就是去獲取表格數(shù)據(jù)曙寡，但是現(xiàn)在需要去加分頁條件了，把分頁的條件傳遞過去寇荧！
loadList(){
this.$http.post('/user/list',{
currentPage:this.currentPage,
pageSize:this.pageSize,
total:this.total}).then(res=>{
this.tableData = res.data.list.user
})
}
一定要使用this举庶，才表示是data中的數(shù)據(jù)！
- 在攔截到的ajax請(qǐng)求中揩抡，對(duì)其進(jìn)行處理户侥！
Mock.mock('/user/list','post',function (option) {
console.debug(result)
let pageData = JSON.parse(option.body);
let begein = (pageData.currentPage-1)*pageData.pageSize;
let end = pageData.currentPage*pageData.pageSize;
return{
list:result.user.slice(begein,end),
total:result.user.length
}
})
分頁數(shù)據(jù)傳遞過來時(shí)是封裝在option中的body里的，但是直接取出來是一個(gè)字符串峦嗤，所以要轉(zhuǎn)化未json對(duì)象蕊唐，有了當(dāng)前頁和頁面大小，就可以把數(shù)組分割成需要的大小并返回回去烁设！
接收到相應(yīng)的數(shù)據(jù)時(shí)取出來賦值給屬性
loadList(){
this.$http.post('/user/list',{
currentPage:this.currentPage,
pageSize:this.pageSize,
}).then(res=>{
//返回的數(shù)據(jù)賦值給tableData表格中
console.debug(res)
this.tableData = res.data.list
this.total = res.data.total
})
}
handleSizeChange與handleCurrentChange是兩個(gè)改變事件需要寫在方法中替梨，當(dāng)頁面大小發(fā)生改變或著當(dāng)前頁發(fā)生改變時(shí)，應(yīng)該調(diào)用loadList這個(gè)函數(shù)去重新加載數(shù)據(jù)装黑！
handleSizeChange(v){
this.pagesize = v;
this.loadList();
},
handleCurrentChange(v){
this.currentPage = v;
this.loadList();
},
5. 刪除
5.1 刪除單個(gè)
- 新建一列副瀑，準(zhǔn)備兩個(gè)按鈕
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">編輯</el-button>
<el-button @click="delclick(scope.row)" type="text" size="small">刪除</el-button>
</template>
-
綁定點(diǎn)擊事件,當(dāng)觸發(fā)了刪除事件時(shí)，先給出提示恋谭，詢問是否確認(rèn)刪除糠睡？確認(rèn)后會(huì)把當(dāng)前行的數(shù)據(jù)發(fā)送出去！并且接收響應(yīng)的結(jié)果展示出來疚颊！
詢問是否刪除使用氣泡詢問框：
<template slot-scope="scope">
<el-button @click="editclick(scope.row)" type="text" size="small">編輯</el-button>
<el-popconfirm
title="親狈孔，確定要?jiǎng)h除我嗎信认？"
confirmButtonText='是的'
cancelButtonText='不用了'
icon="el-icon-info"
iconColor="red"
@onConfirm="delclick(scope.row)"
>
<el-button type="text" size="small " slot="reference">刪除</el-button>
</el-popconfirm>
</template>
delclick(v){
//console.debug(v)
this.$http.post('/user/del',v).then(res=>{
if(res.data.success){
const h = this.$createElement;
this.$notify({
title: res.data.message,
message: h('i', { style: 'color: teal'}, v.name+'已被丟棄')
});
}
}).catch()
},
- 數(shù)據(jù)傳遞過來后，應(yīng)該相應(yīng)一個(gè)結(jié)果均抽。是刪除成功還是失敗
Mock.mock('/user/del','post',function(option){
let obj = JSON.parse(option.body);
console.debug(obj.id)
return{
success:true,
message:'刪除成功嫁赏！'
}
})
5.2 刪除多個(gè)
- 新建一列加上復(fù)選框
<el-table-column
type="selection"
width="55">
</el-table-column>
- 在表格中添加選中改變事件來獲取選中的行
@selection-change="getSelectedRows"
- data函數(shù)中綁定該屬性
data() {
return {
tableData: [],
currentPage:1,
pageSize:10,
total:1,
selectRows:[],
}
},
- 獲取到選中的行的時(shí)候動(dòng)態(tài)改變selectRows的值
getSelectedRows(v){
console.debug(v)
this.selectRows = v;
}
- 添加一個(gè)按鈕來觸發(fā)批量刪除事件
<el-row>
<el-button @click="batchDel" type="danger" icon="el-icon-delete" size="mini" style="float: left;margin: 5px">
</el-button>
</el-row>
- 觸發(fā)時(shí)傳遞選中的所有數(shù)據(jù)，先判斷是否選中一行到忽，如果一行都沒選中則給出提示橄教！刪除成功給出提示！
batchDel(){
if(!this.selectRows.length){
this.$message({
message: '親喘漏，請(qǐng)至少選中一行哦护蝶！',
type: 'warning'
});
return;
}
this.$http.post('/user/batchdel',{rows:this.selectRows}).then(res=>{
if(res.data.success){
const h = this.$createElement;
this.$notify({
title: res.data.message,
message: h('i', { style: 'color: teal'}, '這些數(shù)據(jù)已被丟棄！')
});
}
}).catch()
}
6. 編輯
- 為編輯按鈕注冊(cè)點(diǎn)擊事件翩迈，點(diǎn)擊編輯彈出對(duì)話框表單持灰！他會(huì)把這行的數(shù)據(jù)傳遞過去！
<el-button @click="editclick(scope.row)" type="text" size="small">編輯</el-button>
- 準(zhǔn)備一個(gè)對(duì)話框表單
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="姓名">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年齡">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日">
<el-input v-model="form.birthday" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="城市">
<el-input v-model="form.city" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="updateSubmit">確 定</el-button>
</div>
</el-dialog>
- 所有的屬性我都想要?jiǎng)討B(tài)的生成數(shù)據(jù)负饲！在data函數(shù)中綁定數(shù)據(jù)
data() {
return {
tableData: [],
currentPage:1,
pageSize:10,
total:1,
selectRows:[],
title:"",
dialogFormVisible:false,
form:{
name:'',
age:'',
birthday:'',
city:'',
}
}
}
- 使用for in 來遍歷對(duì)象的屬性堤魁，使用obj[key]可以取到對(duì)象屬性對(duì)應(yīng)的值
- 點(diǎn)擊編輯，應(yīng)該彈出表單返十，回顯數(shù)據(jù)妥泉！彈出表單直接使dialogFormVisible的屬性為true即可！
- 對(duì)象通過屬性獲取值可以使用object[attribute] = value
editclick(row){
this.dialogFormVisible = true
for(let i in row){
this.form[i] = row[i];
}
},
- 點(diǎn)擊確定將數(shù)據(jù)通過ajax發(fā)送出去洞坑！最后響應(yīng)結(jié)果
updateSubmit(){
this.$http.post('/user/updata',{form:this.form}).then(res=>{
if(res.data.success){
const h = this.$createElement;
this.$notify({
title: res.data.message,
message: h('i', { style: 'color: teal'}, this.form.name+'修改成功')
});
}
}).catch()
},
7. 高級(jí)查詢
- 新建高級(jí)查詢的輸入框
<el-form :inline="true" :model="user" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="user.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="城市">
<el-input v-model="user.name" placeholder="城市"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
- 動(dòng)態(tài)綁定數(shù)據(jù)
data() {
return {
tableData: [],
currentPage:1,
pageSize:10,
total:1,
selectRows:[],
title:"",
dialogFormVisible:false,
form:{
name:'',
age:'',
birthday:'',
city:'',
},
user:{
name:'',
city:''
}
}
}
- 點(diǎn)擊查詢盲链，講數(shù)據(jù)發(fā)送到后臺(tái)
methods:{
onSubmit(){
this.$http.post('/user/search',{user:this.user}).then(res=>{
}).catch()
}
8. 添加
- 新建一個(gè)添加按鈕
<el-form-item>
<el-button type="primary" @click="add">添加</el-button>
</el-form-item>
- 點(diǎn)擊添加，彈出對(duì)話框表單迟杂，使dialogFormVisible的屬性為true即可刽沾！
add(){
this.dialogFormVisible = true;
this.title = '添加'
}
- 點(diǎn)擊提交，講數(shù)據(jù)發(fā)送到后臺(tái)排拷，跟修改是一樣的侧漓！
this.$http.post('/user/updata',{form:this.form}).then(res=>{
if(res.data.success){
const h = this.$createElement;
this.$notify({
title: res.data.message,
message: h('i', { style: 'color: teal'}, this.form.name+'修改成功')
});
}
}).catch()
}
