職位管理前后端接口對接

先把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-columntype="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-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template>
</el-table-column>

//定義編輯按鈕的方法
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方法刷新數據，沒有輸入則彈出提示框。

添加成功之后調用initPositions方法刷新數據

也可以添加完成之后清空輸入框 this.pos.name=’ ';

addPosition(){if (this.pos.name){//this.pos ：參數是posthis.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: '已取消刪除'});});},

刪除效果如下圖：