【Vue】1.ElementUI中el-switch开关切换改变值遇到的问题
这样遇到的问题是:切换开关,el-switch会立即改变值,不会根据传入的值改变,因为v-model是双向绑定的。需求:在切换开关的时候给个提示,确定切换开关就改变值,取消就不改变开关值。解决办法:把v-model换成:value。
·
需求:在切换开关的时候给个提示,确定切换开关就改变值,取消就不改变开关值
刚开始代码是这样的:
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="ruleCode" label="规则编号" width="180"></el-table-column>
<el-table-column prop="ruleDesc" label="规则描述"></el-table-column>
<el-table-column prop="address" label="参数设定" width="100" align="center">
<template slot-scope="scope" v-if="scope.row.address">
<el-button @click="handleClickSheDing(scope.row)" type="text" size="small">设定</el-button>
</template>
</el-table-column>
<el-table-column prop="uwCode" label="满足规则时的核保结论" width="180"></el-table-column>
<el-table-column prop="reasonDesc" label="核保结论原因" width="180"></el-table-column>
<el-table-column prop="times" label="数据获取频次" width="180"></el-table-column>
<el-table-column prop="startDate" label="每月起始日" width="180"></el-table-column>
<el-table-column prop="status" label="是否启用" width="100" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="1"
inactive-value="0"
active-color="#13ce66"
inactive-color="#cccccc"
@change="changeSwitch(scope.row, $event)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address9" label="操作" width="50" align="center">
<template slot-scope="scope">
<el-button @click="handleClickUpdate(scope.row)" type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
这样遇到的问题是:切换开关,el-switch会立即改变值,不会根据传入的值改变,因为v-model是双向绑定的
解决办法:把v-model换成:value
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="ruleCode" label="规则编号" width="180"></el-table-column>
<el-table-column prop="ruleDesc" label="规则描述"></el-table-column>
<el-table-column prop="address" label="参数设定" width="100" align="center">
<template slot-scope="scope" v-if="scope.row.address">
<el-button @click="handleClickSheDing(scope.row)" type="text" size="small">设定</el-button>
</template>
</el-table-column>
<el-table-column prop="uwCode" label="满足规则时的核保结论" width="180"></el-table-column>
<el-table-column prop="reasonDesc" label="核保结论原因" width="180"></el-table-column>
<el-table-column prop="times" label="数据获取频次" width="180"></el-table-column>
<el-table-column prop="startDate" label="每月起始日" width="180"></el-table-column>
<el-table-column prop="status" label="是否启用" width="100" align="center">
<template slot-scope="scope">
<el-switch
:value="scope.row.status"
active-value="1"
inactive-value="0"
active-color="#13ce66"
inactive-color="#cccccc"
@change="changeSwitch(scope.row, $event)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address9" label="操作" width="50" align="center">
<template slot-scope="scope">
<el-button @click="handleClickUpdate(scope.row)" type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
// 开关切换
changeSwitch(row, val){
console.log(row, '=========row switch开关===========');
console.log(val, '=========val switch开关===========');
this.$confirm('是否要继续切换开关?','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(() => {
// this.submitRuleBaseSwitch(row, val); 调用接口修改数据
}).catch(() => {
this.$message({
type:'info',
message:'已取消!'
})
})
},
更多推荐
已为社区贡献20条内容
所有评论(0)