<el-table-column label="AAA" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isRecommendTwo"
active-color="#52C4CD"
@change="handelUpdate(scope.$index, scope.row)"
inactive-color="#DCDFE6"
:active-value="true"
:inactive-value="false"
></el-switch>
</template>
</el-table-column>
methods: {
handelUpdate(index,row){
// :active-value得为true
// :inactive-value得为false
let flag = row.isRecommendTwo //保存点击之后v-modeld的值(true,false)
row.isRecommendTwo = !row.isRecommendTwo //保持switch点击前的状态
this.$confirm('是否确认此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(flag){
row.isRecommendTwo = true
// 逻辑处理
this.$message.success('打开成功!')
}else{
row.isRecommendTwo = false
// 逻辑处理
this.$message.success('关闭成功!')
}
}).catch(() => {
this.$message.info('取消操作!')
});
},
封装组件到****.js文件之后的
function Switchs(_this,row,value){
console.log("switch开关 点击按钮后,弹窗确认再改变开关状态",row)
return new Promise((resolve,rejects) => {
let flag = row[value] //保存点击之后v-modeld的值(true,false)
row[value] = !row[value] //保持switch点击前的状态
_this.$confirm('是否确认此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(flag){
row[value] = true
_this.$message.success('打开成功!')
resolve(true)
}else{
row[value] = false
_this.$message.success('关闭成功!')
resolve(false)
}
}).catch(() => {
_this.$message.info('取消操作!')
});
})
}
export default{
Switchs
}
封装之后使用
improt loot from 'loot.js文件路径'
loot.Switchs(this,row,'isRecommendTwo').then(flag=>{
if(flag){
console.log('true')
}else{
console.log('false')
}
})