说明:el-switch的change事件只能拿到开关改变后的值,所以这里用input事件,并使用value绑定值,不使用v-model绑定
模板代码:
1 <el-table-column fixed="right" label="开关" width="100px"> 2 <template slot-scope="scope"> 3 <el-switch :value="scope.row.ternaryFlag" @input='changeTernaryFlag(scope.row, $event)' active-color="#409eff" inactive-color="#f5f5f5"> 4 </el-switch> 6 </template> 7 </el-table-column>
js代码:
1 changeTernaryFlag(row, val) { 2 const data = { 3 id: row.id, 4 ternaryFlag: val 5 } 6 let str = val ? '获取' : '放弃' 7 this.$confirm(`确定要${str}吗?`, '提示', { 8 confirmButtonText: '确定', 9 cancelButtonText: '取消', 10 type: 'warning' 11 }).then(() => { 12 const loading = this.$loading({ 13 lock: true, 14 text: 'Loading', 15 spinner: 'el-icon-loading', 16 background: 'rgba(0, 0, 0, 0.7)' 17 }) 18 ternaryFlag(data).then(res => { 19 console.log(res) 20 loading.close() 21 if (res.data.code === '200') { 22 // 请求成功 修改状态 23 for (const item of this.tableData) { 24 if (item.id === row.id) { 25 let temData = this.tableData 26 item.ternaryFlag = val 27 this.tableData = temData 28 break 29 } 30 } 31 this.$message({ 32 type: 'success', 33 message: `${str}成功!` 34 }) 35 } else { 36 this.$message.error(res.data.msg) 37 } 38 }) 39 }).catch(() => { 40 this.$message({ 41 type: 'info', 42 message: `${str}失败!` 43 }) 44 }) 45 46 }