先把table中的資料展示出來，table裡面的資料實際上是positions裡面的資料，就是要給positions:[] 賦上值
可以在methods中定義一個initPosition方法
methods:{
//定義一個初始化positions的方法
initPositions(){
//發送一個get請求去擷取資料 請求位址是"/system/basic/pos/"
this.getRequest("/system/basic/pos/").then(resp =>{
//判斷如果resp存在的話，請求成功
if (resp){
//就把positions的值指派歌resp就行了
this.positions=resp;
}
})
}
}
定義好之後去看職位管理的頁面看有沒有渲染出資料。
為什麼沒資料呢？我們可以看到我們定義的initPositions并沒有調用，我們以前是登入的時候要點選登入的按鈕去調用方法，但是我們這個不應該點，應該是頁面一加載就會自動的去執行。那麼如果讓方法自動去執行呢？這時候就要用到vue的生命周期裡面的鈎子函數
當這個元件初始化的時候，會自動執行mounted方法，我們在mounted方法裡面去調用initPositions就行了
mounted(){
this.initPositions();
},
要在表格的前面加上多選按鈕的話呢，隻需要加上如下一段代碼即可
<el-table-column
type="selection"
width="55">
</el-table-column>
加了多選按鈕的效果如下圖所示：
在表格裡面添加編輯和删除操作，新增代碼如下：scope.$index:目前操作到第幾行 scope.row：這一行對應的json對象
<el-table-column label="操作">
<!--scope.$index:目前操作到第幾行 scope.row：這一行對應的json對象 -->
<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>
并在methods裡面定義好這兩個方法
//定義編輯按鈕的方法
handleEdit(index,data){
},
//定義删除按鈕的方法
handleDelete(index,data){
},
效果如下圖所示：
如何實作添加方法，這個也挺簡單，在下面html标簽裡面加上@click="addPosition()"
<el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加</el-button>
在methods中的定義的添加方法的代碼如下；首先要判斷使用者是否輸入了名字，輸入了就去發送添加的請求位址，添加成功之後調用initPositions方法重新整理資料，沒有輸入則彈出提示框。
//定義添加按鈕的方法 添加的時候要做判斷，看使用者是否輸入的值，如果沒輸入就給錯誤提示
addPosition(){
if (this.pos.name){
//this.pos ：參數是pos
this.postRequest("/system/basic/pos/",this.pos).then(resp=>{
if(resp){
//添加成功之後需要把表格重新整理一下 可以直接用initPositions，重新加載資料
ithis.initPositions();
}
})
} else {
this.$message.error("職位名稱不可以為空");
}
},
添加成功之後調用initPositions方法重新整理資料
也可以添加完成之後清空輸入框 this.pos.name=' ';
addPosition(){
if (this.pos.name){
//this.pos ：參數是pos
this.postRequest("/system/basic/pos/",this.pos).then(resp=>{
if(resp){
//添加成功之後需要把表格重新整理一下 可以直接用initPositions，重新加載資料
this.initPositions();
this.pos.name='';
}
})
} else {
this.$message.error("職位名稱不可以為空");
}
},
添加按鈕已經做完了，開始做删除按鈕，代碼如下：借助Element UI裡面的MessageBox彈框
//定義删除按鈕的方法
handleDelete(index,data){
this.$confirm('此操作将永久删除【'+data.name+'】職位, 是否繼續?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{
if (resp){
this.initPositions();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
删除效果如下圖：