vue ant checkboxgroup 附带其他值的使用

原本checkboxgroup的选中值只是checkbox项里的值,无法加其他的值,变通了一下,加上了其他的值

是在list中使用的,加上了list项中的属性值

<a-checkbox-group @change="onFlagChange" v-model="selChks" style="width:100%">
        <a-list item-layout="horizontal" :data-source="dataSource">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <a-row slot="title">
                <a-col :span="3">{
    
    {
    
     item.residentName }}</a-col>
                <a-col :span="3">{
    
    {
    
     item.sex_dictText }}</a-col>
                <a-col :span="4">{
    
    {
    
     item.phone }}</a-col>
                <a-col :span="4">{
    
    {
    
     item.idCard }}</a-col>
                <a-col :span="3">{
    
    {
    
     item.communityName }}</a-col>
                <a-col :span="3">{
    
    {
    
     item.buildingNo }}</a-col>
                <a-col :span="3">{
    
    {
    
     item.hourseNumber }}</a-col>
              </a-row>
              <a-row slot="description">
                <a-col :span="1">
                  <a-button type="primary" size="small" @click="subFlag(item.id)">保存</a-button>
                </a-col>
                <a-col :span="23">
                  <!--<a-checkbox-group @change="onFlagChange" v-model="selChks">-->
                  <a-checkbox v-for="f in flagTypes" :key="f.value" :value="item.id+'-'+f.value">{
    
    {
    
    f.text}}</a-checkbox>
                  <!--</a-checkbox-group>-->
                </a-col>
              </a-row>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-checkbox-group>

在每个checkbox中 的value里加如了item.id,与checkbox的value拼接了个字符串,使用时再拆分一下

 subFlag(id) {
    
    
        let flags = [];
        this.selChks.forEach(item => {
    
    
          let tmps = item.split('-');
          if (id == tmps[0]) {
    
    
            flags.push(tmps[1]);
          }
        })

        let param = {
    
    id: id, flags: flags.join(',')}
        let qs = require('qs');
        let p = qs.stringify(param);
        postAction('/setFlag', p).then(res => {
    
    
          console.log(res)
        })
      }

后台是@PostMapping使用@RequestParam 标记的参数,试了几次,实在接收不到数组,就用分隔字符串代替了

   @PostMapping(value = "/setFlag")
    public Result<?> setFlag(@RequestParam(name = "id", required = true) String id,
                             @RequestParam(name = "flags", required = true) String flags) {
    
    
        return Result.ok("已保存");
    }

猜你喜欢

转载自blog.csdn.net/wyljz/article/details/106584697