<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') } })