网站建设外贸,河南海华工程建设监理公司网站,360免费建站域名免费吗,买软件网站建设应用场景
基本用法使用v-model双向绑定值#xff0c;进行开关控制 例子1:需求#xff1a;
**点击switch#xff0c;出弹窗#xff0c;点击弹窗保存按钮调接口成功后再赋值#xff08;row.orderButtonValue“1”#xff09;打开switch开的状态变颜色。 在vue 中使用 :va…应用场景
基本用法使用v-model双向绑定值进行开关控制 例子1:需求
**点击switch出弹窗点击弹窗保存按钮调接口成功后再赋值row.orderButtonValue“1”打开switch开的状态变颜色。 在vue 中使用 :value动态的绑定值。 在Vue中冒号(:)被称为v-bind指令的缩写。v-bind指令是Vue中非常强大的一个指令它用于动态绑定数据到HTML标签的属性中。简而言之冒号就是v-bind指令的语法糖。 说白了冒号是用来告诉Vue我要绑定数据到这个属性里属性的名称就是冒号后面的部分 ** el-table-column proporderButtonValue label指令 min-width100 aligncentertemplate slot-scopescopeel-switchv-showscope.row.orderButton 1changechangeClick(scope.row, scope.$index):valuescope.row.orderButtonValueactive-value1//打开为 字符串1inactive-value0//关闭 字符串0active-color#67C8FFinactive-color#CCCCCC{{ scope.row.orderButtonValue }}/el-switch/template/el-table-columndiv classdialogel-dialogclassparams_dialogtitle提示:visible.synctextDialogVisiblewidth30%centerp classtext descsvg-iconicon-classel-warningstylewidth: 16px; height: 16px; margin-right: 18px; color: #ff6c00/{{ orderVariableNameDesc }}/pp classtext con是否确认?/pdiv slotfooter classdialog-footerel-button typeprimary stylewidth: 76px; height: 36px clicktextSaveClick保存/el-buttonel-buttonclicktextCancelBtnstyleborder: 1px solid #4683ff;background-color: #011948;color: #4683ff;width: 76px;height: 36px;取消/el-button/div/el-dialog/div//指令按钮changeClick(row, index) {let rowPlcValue row.orderButtonValue;//row.orderButtonValue 接口返回值//启动弹窗if (rowPlcValue 0) {this.orderVariableNameDesc row.orderVariableNameDesc;this.textDialogVisible true;this.switchIndex index;return;}if (rowPlcValue 1) {this.tableData.splice(index, 1, this.tableData[index]);}if (row.testOperator debug_onLine) {//调试中--可打开 isAddressShow现场使能按钮if ((row.orderButtonValue 0 this.isAddressShow true) ||(row.orderButtonValue null this.isAddressShow true)) {let params {//传参数...};//write接口getWriteInfo(params).then(res {if (res.code 200) {//指令接口let params {//传参数...};getOrderButtonInfo(params).then(res {res.data.forEach(item {this.tableData.forEach(v {//表格if (item.debugContentId v.id item.orderButtonValue 1) {v.orderButtonValue 1;//switch打开} else if (item.debugContentId v.id item.orderButtonValue 0) {v.orderButtonValue 0;//switch关闭}});});});}});} else if (row.orderButtonValue 1 this.isAddressShow true) {//调试中--可关闭let params {//传参数...};getWriteInfo(params).then(res {if (res.code 200) {//指令接口let params {//传参数...};getOrderButtonInfo(params).then(res {res.data.forEach(item {this.tableData.forEach(v {//表格if (item.debugContentId v.id item.orderButtonValue 1) {v.orderButtonValue 1;} else if (item.debugContentId v.id item.orderButtonValue 0) {v.orderButtonValue 0;}});});});}});} else {this.$message.warning(请先点击现场手动调试使能);}} else if (row.orderButtonValue 1 row.testOperator ! debug_onLine this.isAddressShow true) {//可关闭let params {//传参数...};getWriteInfo(params).then(res {if (res.code 200) {console.log(write接口);//指令接口let params {//传参数...};getOrderButtonInfo(params).then(res {res.data.forEach(item {this.tableData.forEach(v {//表格if (item.debugContentId v.id item.orderButtonValue 1) {v.orderButtonValue 1;} else if (item.debugContentId v.id item.orderButtonValue 0) {v.orderButtonValue 0;}});});});}});} else {this.$message.warning(请先点击现场手动调试使能);}},//指令弹窗-----保存textSaveClick() {let params {//传参数...};this.textDialogVisible false;this.tableData[this.switchIndex].orderButtonValue 1;this.tableData.splice(this.switchIndex, 1, this.tableData[this.switchIndex]);getWriteInfo(params).then(res {if (res.code 200) {//指令接口let params {//传参数....};getOrderButtonInfo(params).then(res {console.log(res.data, 1057);});}});},例子2 div classleft-linkspan classleft-title link-btn通信连接/spanel-switch:valuelinkValueactive-color#4683FFinactive-color#CCCCCCchangeswitchClick/el-switch/div//通信连接switchClick() {if (this.linkValue false) {if (this.isValueNum 2) {this.linkValue true;let params {//传参数...};//打开通信hubConnectInfo(params).then(res {if (res.code 200) {this.$message.success(res.message);this.slaveId res.data.slaveId;this.slaveIdCopy res.data.slaveId;this.acquireInfo(res.data.slaveId);this.$emit(switchType, true);}});} else {this.$message.error(请先打开串口号!);}} else if (this.linkValue true) {this.linkValue false;//关闭通信offDebugInfo().then(res {if (res.code 200) {clearInterval(this.timer);this.timer null;this.$emit(switchType, false);//关闭机器把调桨控制值清颜色恢复默认this.clearColorValue();}});}},
