将表格中勾选的数据传进要提交的表格中

Question

我希望在在我勾选之后，可以获取我勾选的物资名称和单位，然后传进我的新增表格中，请问要怎么做？
我的表格代码如下：

<el-table :data="stockList" style="height:430px;" border>
              <el-table-column type="selection" :reserve-selection="true"></el-table-column>
              <el-table-column prop="itemname" label="物资名称"></el-table-column>
              <el-table-column prop="numbers" label="物资数量"></el-table-column>
              <el-table-column prop="unit" label="物资单位"></el-table-column>
            </el-table>

Answer 1

参考GPT和自己的思路：您可以利用 Vue.js 中的计算属性来获取勾选的物资名称和单位，并将它们的值传递到新增表格中。以下是一种可能的解决方案：

1. 定义一个计算属性，它会根据表格中被勾选的数据生成一个新数组，其中只包含被勾选数据的物资名称和单位：

computed: {
  selectedItems() {
    return this.stockList.filter(item => this.$refs.table.selection.includes(item))
                          .map(item => ({ name: item.itemname, unit: item.unit }));
  }
}

1. 在新增表格中设置 v-model，使其与一个对象相关联：

<el-form :model="addedItem">
  <el-form-item label="物资名称">
    <el-input v-model="addedItem.name"></el-input>
  </el-form-item>
  <el-form-item label="物资单位">
    <el-input v-model="addedItem.unit"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

1. 在 methods 中定义一个 submitForm 函数，它将会把被勾选的物资名称和单位写入到新增表格的对象中：

methods: {
  submitForm() {
    this.addedItem.name = this.selectedItems[0].name;
    this.addedItem.unit = this.selectedItems[0].unit;
  }
}

请注意，如果有多个物资被勾选，上面的代码只会选取第一个物资的名称和单位。如果需要把全部勾选的物资都写入新增表格中，您可以在计算属性中修改它的返回值，使其返回一个包含所有勾选物资的数组，然后在 submitForm 中遍历该数组，逐个将它们写入到新增表格的对象中。