el-switch 通過請求的結果開啟/關閉

說明：el-switch的change事件只能拿到開關改變后的值，所以這里用input事件，並使用value綁定值，不使用v-model綁定

模板代碼：

          <el-table-column fixed="right" label="開關" width="100px">
            <template slot-scope="scope">
              <el-switch :value="scope.row.ternaryFlag"     @input='changeTernaryFlag(scope.row, $event)' active-color="#409eff" inactive-color="#f5f5f5">
              </el-switch>
            </template>
          </el-table-column>

js代碼：

    changeTernaryFlag(row, val) {
      const data = {
        id: row.id,
        ternaryFlag: val
      }
      let str = val ? '獲取' : '放棄'
      this.$confirm(`確定要${str}嗎?`, '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        ternaryFlag(data).then(res => {
          console.log(res)
          loading.close()
          if (res.data.code === '200') {
            // 請求成功  修改狀態
            for (const item of this.tableData) {
              if (item.id === row.id) {
                let temData = this.tableData
                item.ternaryFlag = val
                this.tableData = temData
                break
              }
            }
            this.$message({
              type: 'success',
              message: `${str}成功!`
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `${str}失敗!`
        })
      })

    }