应用场景
基本用法使用v-model双向绑定值，进行开关控制
文章来源：https://www.toymoban.com/news/detail-679286.html
例子1:需求：
**点击switch，出弹窗，点击弹窗保存按钮调接口成功后再赋值（row.orderButtonValue=“1”）打开switch开的状态变颜色。
在vue 中使用 :value动态的绑定值。
（在Vue中，冒号(:)被称为v-bind指令的缩写。v-bind指令是Vue中非常强大的一个指令，它用于动态绑定数据到HTML标签的属性中。简而言之，冒号就是v-bind指令的语法糖。
说白了，冒号是用来告诉Vue，我要绑定数据到这个属性里，属性的名称就是冒号后面的部分）
**文章来源地址https://www.toymoban.com/news/detail-679286.html
<el-table-column prop="orderButtonValue" label="指令" min-width="100" align="center">
<template slot-scope="scope">
<el-switch
v-show="scope.row.orderButton == 1"
@change="changeClick(scope.row, scope.$index)"
:value="scope.row.orderButtonValue"
active-value="1"//打开为 字符串1
inactive-value="0"//关闭 字符串0
active-color="#67C8FF"
inactive-color="#CCCCCC"
>{{ scope.row.orderButtonValue }}
</el-switch>
</template>
</el-table-column>
<div class="dialog">
<el-dialog
class="params_dialog"
title="提示"
:visible.sync="textDialogVisible"
width="30%"
center
>
<p class="text desc">
<svg-icon
icon-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();
}
});
}
},
到了这里，关于element——switch接口成功后赋值打开开关的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
