<el-table-column label="上頭條" 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文件之后的
/**
* @author fu
* @description switch開關 點擊按鈕后,彈窗確認再改變開關狀態
* @param {Object} row 當條數據的內容對象
* @param {String} value v-modeld值
* @returns {Boolean} 打開了按鈕返回true,關閉了按鈕返回false
*/
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')
}
})
