nuxt项目表格多选table，input传参并选中input type=“checkbox“原生js

<template>

<div class="dist-content">

        <form :model="form">

          <table>

            <thead>

              <tr style="text-align: left">

                <th class="th">Name</th>

                <th class="th">Description</th>

                <th class="th">Quantity</th>

              </tr>

            </thead>

            <tbody>

              <tr v-for="(item, index) in ExampleData" :key="index">

                <td class="checkbox">

                  <label>

                    //v-model所带的值为是否选中，:name所带的值为参数

                    <input

                      v-model="item.isSelect"

                      :name="item.Name+ '%' + item.Description+ '%' + item.Quantity"

                      type="checkbox"

                      style="margin-right: 6px"

                      @click="IsCheck"

                    />

                    {{ item.Name}}

                  </label>

                </td>

                <td>{{ item.Description}}</td>

                <td>{{ item.Quantity}}</td>

              </tr>

            </tbody>

          </table>

        </div>

</form>

</template>

<script>

export default {

        data() {

                return {

                       ExampleData:[

                               

{

            Name: '1',

            Description: 'one',

            Quantity: '1',

          },

          {

            Name: '2',

            Description: 'two',

            Quantity: '2',

          },

          {

            Name: '3',

            Description: 'three',

            Quantity: '3',

          }

                        ],

                Form:{

                           SelectedData  :[],                        

                        }

                }        

        },

methods: {        

IsCheck(e) {

        let itemArr = [];

        const _this = this;

        const ExampleData= _this.ExampleData;

        itemArr = e.target.name.split('%');

        const itemStr = { Name: itemArr[0], Description: itemArr[1], Quantity: itemArr[2]};

        this.Form.SelectedData  = [];

        //和原数据进行对比

        const select = ExampleData.find((d) => {

          return d.Name=== itemStr.Name&& d.Description=== itemStr.Description&& d.Quantity=== itemStr.Quantity;

        });

        //select 为选中的对象，在选中的对象里添加select字段

        select.isSelect = e.target.checked;

        ExampleData.forEach((e) => {

          if (e.isSelect) {

            // 选中数组

            this.Form.SelectedData .push({ Name: e.Name, Description: e.Description, Quantity: e.Quantity });

        console.log(this.Form.SelectedData)//该数组可作为接下来要请求接口传参数

          }

        });

      },

}

}

</script>

<style lang="scss">

        

.dist-content {

        height: 246px;

        padding: 12px;

        overflow-y: auto;

        border: 1px solid #ccc;

        @media (max-width: 600px) {

          height: auto;

        }

        table {

          td {

            padding: 6px 0;

          }

          .th {

            width: calc(100% / 2.5);

            overflow: hidden;

            text-overflow:ellipsis;

            white-space: nowrap;

          }

          tbody {

            .checkbox {

              line-height: 12px;

              cursor: pointer;

            }

            td:nth-child(1){

              &:hover {

                color: #1c449b;

                cursor: pointer;

              }

            }

          }

        }

      }

</style>