element——switch接口成功后赋值打开开关

应用场景

基本用法使用v-model双向绑定值，进行开关控制

在这里插入图片描述

例子1:需求：

**点击switch，出弹窗，点击弹窗保存按钮调接口成功后再赋值（row.orderButtonValue=“1”）打开switch开的状态变颜色。
在vue 中使用 :value动态的绑定值。
（在Vue中，冒号(:)被称为v-bind指令的缩写。v-bind指令是Vue中非常强大的一个指令，它用于动态绑定数据到HTML标签的属性中。简而言之，冒号就是v-bind指令的语法糖。
说白了，冒号是用来告诉Vue，我要绑定数据到这个属性里，属性的名称就是冒号后面的部分）
**

 <el-table-column prop="orderButtonValue" label="指令" min-width="100" align="center"><template slot-scope="scope"><el-switchv-show="scope.row.orderButton == 1"@change="changeClick(scope.row, scope.$index)":value="scope.row.orderButtonValue"active-value="1"//打开为 字符串1inactive-value="0"//关闭 字符串0active-color="#67C8FF"inactive-color="#CCCCCC">{{ scope.row.orderButtonValue }}</el-switch></template></el-table-column><div class="dialog"><el-dialogclass="params_dialog"title="提示":visible.sync="textDialogVisible"width="30%"center><p class="text desc"><svg-iconicon-class="el-warning"style="width: 16px; height: 16px; margin-right: 18px; color: #ff6c00"/>{{ orderVariableNameDesc }}</p><p class="text con">是否确认?</p><div slot="footer" class="dialog-footer"><el-button type="primary" style="width: 76px; height: 36px" @click="textSaveClick">保存</el-button><el-button@click="textCancelBtn"style="border: 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 class="left-link"><span class="left-title link-btn">通信连接</span><el-switch:value="linkValue"active-color="#4683FF"inactive-color="#CCCCCC"@change="switchClick"></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();}});}},