您的位置:首页 > 游戏 > 手游 > Switch开关根据条件判断是否阻止切换

Switch开关根据条件判断是否阻止切换

2024/12/23 5:10:24 来源:https://blog.csdn.net/m0_50953782/article/details/141166384  浏览:    关键词:Switch开关根据条件判断是否阻止切换
设置 beforeChange 属性,若返回 false 或者返回 Promise 且被 reject,则停止切换。
<el-switch v-model="value1" :loading="loading1" :before-change="beforeChange1" />const value1 = ref(false)
const loading1 = ref(false)const beforeChange1 = () => { 
loading1.value = true 
return new Promise((resolve) => { setTimeout(() => { loading1.value = false ElMessage.success('Switch success') return resolve(true) }, 1000) 
})
}
表格中的switch根据此行的某些数据,判断是否阻止切换
  <el-table-column align="center" label="开关" prop="switch_status"><template #default="scope"><el-switchv-model="scope.row.switch_status"inline-promptactive-text="正常"inactive-text="异常":active-value="1":loading="loading":inactive-value="0":before-change="() => beforeChange(scope.row)"@change="changeSwitch(scope.row, scope.$index)"/></template></el-table-column>const beforeChange = async (row) => {if(不需要阻止切换){return true}else{return false}
若是使用 @change,此时Switch状态已经被切换,若此时应该是禁止切换,再切换为原来的状态,则会出现切换的过程,一闪而过,用户视觉体验不好。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com