需求:
在点击是switch开关时,弹出提示框,保持开关的原状态不变,状态改变与否根据弹窗的选择来确定.

错误演示:
演示前的数据(使用第一条数据进行演示)
点击开关前,开关是向右的

点击开关后,弹窗之后还未进行选择,状态已经改变了,开关向左了

原因: 数据绑定使用的是v-model
通过v-model绑定的数据能实时变换

<el-table-column label="更改合同类型" prop="contractType2" width="145" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.contractType2"
              active-text="标准"
              inactive-text="特殊"
              active-color="rgb(102, 204, 255)"
              inactive-color="#ff4949"
              @input="changContractType(scope.row)"
            />
          </template>
</el-table-column>

知道原因后,进行优化.

正确演示:
演示数据(第一条)
点击开关前,状态向左

点击开关后,状态不变,还是向左
修改了的代码:

<el-table-column label="更改合同类型" prop="contractType2" width="145" align="center">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.contractType2"
              active-text="标准"
              inactive-text="特殊"
              active-color="rgb(102, 204, 255)"
              inactive-color="#ff4949"
              @input="changContractType(scope.row)"
            />
            <span v-show=" scope.row.ClueType == '--' ">{{ scope.row.ClueType }}</span>
          </template>
</el-table-column>

用value绑定数据,这样,只有手动改变scope.row.contractType2的时候,switch的value才会改变

最后, 贴一下 changContractType() 方法 的代码

changContractType(row) {
  this.$confirm('确定改变', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.contractType2 = !row.contractType2
    this.$message({ type: 'success', message: '修改成功!' })
  }).catch(() => {
    this.$message({ type: 'info', message: '已取消修改！' })
  })
}