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