账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 如何完成多选的table表格把数据放到一个对象里的问题?
    39
    0
     <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
                 <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
            <el-table-column align="center" prop="name" label="方案名称" width='120'>
              <!-- <template slot-scope="scope">{{scope.row.beginCardNo}} - {{scope.row.endCardNo}}</template> -->
            </el-table-column>
            <el-table-column align="center" prop ="type" label="兑换类型">
              <!-- <template slot-scope="scope">{{scope.row.cardTypeName}}</template> -->
            </el-table-column>
            <el-table-column align="center"  label="兑换个数" width="160px" prop ="exchangeNum">
              <template slot-scope="scope">
                 <!-- <el-col :span="16"> -->
                <el-input placeholder="请输入兑换个数" v-model="scope.row.exchangeNum" @change="change"></el-input>
                 <!-- </el-col> -->
              </template>
            </el-table-column>
            <!--<el-table-column align="center" prop="" label="未配送数量"></el-table-column>-->
            <el-table-column align="center" label="消耗积分" prop="costPointsNum">
               <template slot-scope="scope">{{scope.row.exchangeNum*scope.row.costPointsNum}}</template>
              <!-- <template slot-scope="scope">{{scope.row.deposit | money}}</template> -->
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" fixed="right">
              <template slot-scope="scope">
                <a class="operation" @click="deleteItem(scope.row)" v-authority="508003">删除</a>
              </template>
            </el-table-column> -->
          </el-table>

    在handleSelectionChange方法中实现把 选中的一个或者多个行的时候把 costPointsNum exchangeNum schemeId 这几个参数传入到detaiList里面 形成如下形式的数组?

    {
      
      "detailList": [
        {
          "costPointsNum": 0,
          "exchangeNum": 0,
          "schemeId": 0
        },{
          "costPointsNum": 0,
          "exchangeNum": 0,
          "schemeId": 0
        }
      ],
     
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 锁顁婞福 普通会员 1楼

      在 Vue 中,你可以使用 v-modelv-for 来实现多选的表格。以下是一个简单的示例:

      ```html

      {{ item.name }}
      {{ option.value }}

      ```

      在这个示例中,我们有一个 items 数组,每个元素都有一个 id 和一个 name。我们还有一组 options,每个元素都有一个 id 和一个 value

      在模板中,我们使用 v-for 来遍历 items 数组,并为每个元素创建一个 v-for 循环。每个 v-for 循环都对应一个 options 数组中的元素。我们还使用 v-model 来绑定 items 数组和 options 数组的值。

      当用户选择一个选项时,我们可以通过更新 options 数组的值来更改表格的显示。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部