表格：
<el-table ref="tablestu" v-bind:data="tablestu.items" size="mini" fit stripe border
v-on:selection-change="selstuchange"
style="margin:1px;" :height="tablestu.height">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column label="" prop="rowid" width="50" align="center"></el-table-column>
<el-table-column label="學期" prop="term" width="100" align="center"></el-table-column>
<el-table-column label="開課單位" prop="dptname" width="200" header-align="center"></el-table-column>
<el-table-column label="課程代碼" prop="courseid" width="100" align="center"></el-table-column>
<el-table-column label="課程序號" prop="courseno" width="120" align="center"></el-table-column>
<el-table-column label="課程名稱" prop="cname" width="300" header-align="center" show-overflow-tooltip></el-table-column>
<el-table-column label="任課教師" prop="name" width="100" align="center"></el-table-column>
<el-table-column label="學號" prop="stid" width="120" align="center"></el-table-column>
<el-table-column label="姓名" prop="stname" width="100" align="center"></el-table-column>
<el-table-column label="分數" prop="score" width="80" align="center"></el-table-column>
<el-table-column label="成績類別" prop="stype" width="110" align="center">
<template slot-scope="scope">
<div v-if="!scope.row.iseditstype">
<a href="#" v-on:click="scope.row.iseditstype=true;selstu.currentid=scope.row.id">{{scope.row.stype}}</a>
</div>
<div v-else>
<el-select v-model="scope.row.stype" size="mini" placeholder="請選擇" style="width:100px;"
v-on:change="stustypechange"
v-on:visible-change="closestustype">
<el-option v-for="item in sstype"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
</el-table-column>
<el-table-column label="考試類別" prop="ttype" width="80" align="center"></el-table-column>
</el-table>
data中：
selstu: {
stus: [],
stype: '',
ttype: '',
currentid: ''
}
相關方法：
srh: function () {
var that = this;
var p = this.formsrh;
p.rows = this.tablestu.rows;
p.page = this.tablestu.page;
$.post('/admin_areas/examination/ListBuKaoStu', p, function (res) {
accecpResult(res, function () {
res.data.rows.forEach(item => {
item.iseditstype = false;
item.iseditttype = false;
})
that.tablestu.items = res.data.rows;
that.tablestu.total = res.data.total;
})
})
},
stustypechange: function (val) {
var p = {
id: this.selstu.currentid,
stype: val
}
var that = this;
$.post('/admin_areas/examination/editbkstype', p, function (res) {
accecpResult(res, function () {
that.tablestu.items.forEach(item => {
if (item.id == that.selstu.currentid) {
item.iseditstype = false;
}
})
}, function () {
that.$message.error(res.data);
})
})
},
closestustype: function (val) {
if (val == false) {
this.tablestu.items.forEach(item => {
if (item.id == this.selstu.currentid) {
item.iseditstype = false;
}
})
}
},
思路說明：
1、srh方法獲取數據中，將各行數據增加屬性iseditstype ，以此屬性來切換正常顯示與下拉框顯示。
2、正常顯示時，顯示一個鏈接，點擊後修改該行的iseditstype值，並記錄下該行id，代碼： {{scope.row.stype}}
3、下拉框顯示時，處理兩個事件：visible-change和change，前者是下拉麪板顯示狀態，後者是值發送改變
下拉麪板隱藏時，修改該行的iseditstype值爲false，改爲正常顯示。
值改變時，向後端發送修改請求，響應成功後修改isedittype的值。
通過selstu.currentid來確定當前操作的行id