从后台循环遍历获取多选框的值，点击修改后在传到后台

从后台循环遍历获取多选框的值，点击修改后在传到后台

1、Vue页面代码

<div style="float:right;height: 55%;width:90%;padding-left: 1%;">

  <el-table :data="tableData" border style="width: 95%;margin-left: 0%" height="300">
    <!--<el-table :data="tableData" style="width: 100%">-->
    <el-table-column prop="ywdm" label="代码" width="180">
    </el-table-column>
    <el-table-column prop="xtmc" label="系统代码" width="180">
    </el-table-column>
    <el-table-column prop="ywmc" label="业务名称" width="180">
    </el-table-column>
    <el-table-column label="短信" width="80">
      <template slot-scope="scope">
        <el-checkbox v-model="dxArray[scope.$index]" @change="switchChangeDx(scope)"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="微信" width="80">
      <template slot-scope="scope">
        <el-checkbox v-model="wxArray[scope.$index]" @change="switchChangeWx(scope)"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="电子邮件" width="80">
      <template slot-scope="scope">
        <el-checkbox v-model="emailArray[scope.$index]" @change="switchChangeEmail(scope)"></el-checkbox>
      </template>
    </el-table-column>

  </el-table>
</div>

2、js

methods: {

doAxios: function () {
  //后台获取 发送配置信息
  axios({
    method: 'post',
     url:'/dxglpt/wtcjclLists',
    //url: 'http://192.168.100.163:8082/dxglpt/getFspz',
  }).then((response) => {
    this.tableData = response.data.data;
    let useData = this.tableData;
    this.saveOldDataList = JSON.parse(JSON.stringify(this.tableData));//后台获取到的值赋值给saveOldDataList ，修改的时候判断哪一个复选框是否改变
    let array_ = [];
    let wxArray_ = [];
    let emailArray_ = [];
    for (var i = 0; i < useData.length; i++) {
      array_[i] = useData[i].sfdx === "1" ? true : false;
      wxArray_[i] = useData[i].sfwx === "1" ? true : false;
      emailArray_[i] = useData[i].sfemail === "1" ? true : false;
    }
    this.dxArray = array_;
    this.wxArray = wxArray_;
    this.emailArray = emailArray_;
  }).catch(function (error) {
    //  console.log(error);
    this.$message.error("系统错误,请联系开发人员！");
  })
},

switchChangeDx(scope) {
  if (this.dxArray[scope.$index] === false) {
    this.tableData[scope.$index].sfdx = 0;
    this.flag = 0;
  } else {
    this.tableData[scope.$index].sfdx = 1;
    this.flag = 0;
  }
},
switchChangeWx(scope) {
  if (this.wxArray[scope.$index] === false) {
    this.tableData[scope.$index].sfwx = 0;
    this.flag = 0;
  } else {
    this.tableData[scope.$index].sfwx = 1;
    this.flag = 0;
  }
},
switchChangeEmail(scope) {
   if(this.emailArray[scope.$index]===false){
     this.tableData[scope.$index].sfemail=0;
     this.flag =0;
   }else{
     this.tableData[scope.$index].sfemail=1;
     this.flag =0;
   }
},

//提交修改信息

submitForm() {

//发送配置信息修改
let dxarray_ = [];
for (let i = 0; i < this.tableData.length; i++) {
    if ( (this.saveOldDataList[i].sfdx !==  String(this.tableData[i].sfdx))
      || (this.saveOldDataList[i].sfwx !==  String(this.tableData[i].sfwx)
      || (this.saveOldDataList[i].sfemail !==  String(this.tableData[i].sfemail)))) {
      dxarray_.push(this.tableData[i]);
  }
}

let fspzStr ={"fspz":dxarray_} ;

axios({
  method: 'post',
  url: 'http://192.168.100.163:8082/dxglpt/editFspz',
  params: {
    jsonStr: JSON.stringify(fspzStr)
  }

}).then((response) => {
  if (response.data.flg === 'success') {

    this.$message({
      message: '发送配置信息修改成功',
      type: 'success',
      duration: 2000
    });

  } else {
    this.$message({
      message: '发送配置修改失败',
      type: 'error',
      duration: 5000
    });
  }

}).catch((error) =>{
  this.$message.error("系统错误,请联系开发人员！");
})

 

}

},

mounted: function () {
  this.doAxios();

}

3、mock.js 假数据（此处没有代码列）

Mock.mock(/wtcjclLists/, 'post', {
  "data":[
    {
      xtmc:'1账务系统',
      ywmc:'1账务系统-手动发送',
      sfdx:'1',
      sfwx:'0',
      sfemail:'1',
    },
    {
      xtmc:'2财务系统',
      ywmc:'2财务系统-手动发送',
      sfdx:'1',
      sfwx:'0',
      sfemail:'1',
    },
    {
      xtmc:'3财务系统',
      ywmc:'3财务系统-手动发送',
      sfdx:'0',
      sfwx:'1',
      sfemail:'1',
    },
    {
      xtmc:'4财务系统',
      ywmc:'4财务系统-手动发送',
      sfdx:'1',
      sfwx:'0',
      sfemail:'0',
    },
  ]

})

4、截图显示