vue+ant调用后端数据 控制switch开关

2023.8发现自己之前的一个草稿，稚嫩的功能。想想决定整理后发出来，当做纪念。

思路：

1.调用后端接口接收数据status

2.每列status判断开关switch的开关状态

3.每次开关，将id对应的开关状态status返回后端

Html：

        <a-row class="pushSettings">
          <a-col :style="{ marginBottom: '8px' }" :span="24">
            <div class="pushswitch" v-for="(item, index) in switchList">
              <div class="pushContent">{{ item.pushContent }}</div>
              <div class="pushJudgment">
                <a-switch
                  :default-checked="item.ifPush == 0 ? true : false"
                  @change="judgmentSwitch(item, index)"
                />
              </div>
            </div>
          </a-col>
        </a-row>

后端接口：

从/pull获取到
 {
            "ifPush": 0,1 开/关
            "id": 1, 内容的id
            "pushContent": "内容1"
 },

点击开/关按钮 调用/push接口
传上面接口获取到的id  字段名pushId
状态status  点开就传0  关就传1

CSS:

.pushSettings {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  .pushContent {
    padding-right: 24px;
    font-size: 16px;
    font-weight: bold;
  }
  .pushswitch {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
  }
}

1.调用后端接口读取 id和 status

data() {
    return {
      pushId: '',
      ifPush: '',
      switchList: {},
    }
}，

created() {
  this.getPush()
}，

methods: {
   getPush() {
     let that = this
     postAction('/pull', {}).then((res) => {
        that.switchList = res.result
      })
   },

   judgmentSwitch(item,index) {
    let params = {
     pushId:this.pushId,
     ifPush:this.ifPush,
     }
     postAction('/pull', {params}).then((res) => {
       that.switchList = res.result
     })
   }
}