关于iview的复选框与前后台交互问题

最新推荐文章于 2024-04-27 05:36:48 发布

原创最新推荐文章于 2024-04-27 05:36:48 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iview的复选框

iview框架专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何在Vue中使用Checkbox组进行批量操作，包括页面渲染、数据绑定、与后台交互的完整流程。通过实例展示了如何处理Checkbox选中状态与后台数据同步的问题，以及在保存操作中将数组转换为字符串以便于后台保存。

静态页面
<checkbox-group v-model="pageItem.stu_batch">
  <Checkbox label="1">综合院校</Checkbox>
  <Checkbox label="2">提前批招生</Checkbox>
  <Checkbox label="3">无批次招生</Checkbox>
  <Checkbox label="4">第一批次招生</Checkbox>
  <Checkbox label="5">第二批次招生A</Checkbox>
  <Checkbox label="6">第二批次招生B</Checkbox>
  <Checkbox label="7">第三批次招生A</Checkbox>
  <Checkbox label="8">第三批次招生B</Checkbox>
</checkbox-group>

//渲染页面的数据
pageItem:{
stu_batch:[], //定义为数组（官方api为数组）
}

与后台交互的对象（需要与前面pageItem进行赋值）
pageItemAddAndUpd: {
stu_batch:"",//因为我这边后台接收的为字符串
}

//这里赋值需要进行判断（因为如果是返回时空值没有填数据的话需要进行判断）
if(response.data.datalist[0].stu_batch==""||response.data.datalist[0].stu_batch==null){
  this.pageItem.stu_batch = [];
}else{
  this.pageItem.stu_batch = JSON.parse(response.data.datalist[0].stu_batch);
}

//这里是保存操作

this.pageItemAddAndUpd.stu_batch = JSON.stringify(this.pageItem.stu_batch)//需要将数组转化成字符串进行后台保存

关于iview的复选框与前后台交互问题

2 条评论