vue 显示 禁用 按钮操作
字段:{label: "是否禁用",prop: "switch",type: "switch",viewDisplay:false,slot:true,}插槽:<templateslot="switch"slot-scope="scope"><el-switchv-model="scope.row.switch":active-value="true":inac.
·
字段: { label: "是否禁用", prop: "switch", type: "switch", viewDisplay:false, slot:true, }
插槽: <template slot="switch" slot-scope="scope"> <el-switch v-model="scope.row.switch" :active-value="true" :inactive-value="false" @change="switchChange($event, scope.row)" active-color="#ff4949" inactive-color="#13ce66" > </el-switch> </template>
方法: /** * 点击启用禁用 */ switchChange(e, data){ //接收页面权限状态值 let flag = data.switch; //保证确认按钮按下之后才会更改权限按钮样式 data.switch = !data.switch; let _this = this this.$confirm('是否禁用当前工人', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(function () { let gstate; //页面状态是true时 点击按钮状态应该更改为 2.已冻结 页面状态是false时,根据条件更改状态 if(e == true){ gstate = 2; data.state = gstate; //更改工人表工人状态 putObj(data); }else{ //根据工人id查询微信账户表 appGetObj(data.id).then(response => { let gdate = response.data.data; //微信账户表有相关人信息时 状态改为已激活 否则已注册 if(gdate != null){ gstate = 1; data.state = gstate; //更改工人表工人状态 putObj(data); }else{ gstate = 0; data.state = gstate; //更改工人表工人状态 putObj(data); } }); } //操作完成后更改权限按钮样式 flag ? data.switch = true : data.switch = false }).then(data => { _this.$message({ showClose: true, message: '禁用成功', type: 'success' }) //this.getPage(this.page) }).catch(function (err) { this.$message({type:'info',showClose: true,message:'已取消修改!'}) }) }
更多推荐
已为社区贡献1条内容
所有评论(0)