示例代码

<template>
  <div id="app">
    <p>表单数据</p>
    <table>
      <thead>
        <tr>
          <td>
            <input
              type="checkbox"
              v-model="data.selected"
              @change="selectAll"
            />
          </td>
          <td>商品</td>
          <td>单价</td>
          <td>存库</td>
          <td colspan="2">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, index) in data.list">
          <td>
            <input
              type="checkbox"
              v-model="data.checkboxList"
              :value="value"
              @change="checkSelect"
            />
          </td>
          <td>{{ value.name }}</td>
          <td>{{ value.price }}</td>
          <td>{{ value.stock }}</td>
          <td>
            <button @click="sub(value)">-</button>
            {{ value.number }}
            <button @click="add(value)">+</button>
          </td>
          <td><button @click="del(index, value.id)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总价{{ totalPrice() }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const data = reactive({
  selected: false,
  checkboxList: [],
  list: [
    {
      id: 1,
      name: "铅笔",
      price: 10,
      number: 1,
      stock: 3,
    },
    {
      id: 2,
      name: "鼠标",
      price: 20,
      number: 2,
      stock: 5,
    },
    {
      id: 3,
      name: "键盘",
      price: 30,
      number: 1,
      stock: 6,
    },
  ],
});

const selectAll = () => {
  if (data.selected) {
    data.checkboxList = data.list;
  } else {
    data.checkboxList = [];
  }
};

const checkSelect = () => {
  if (data.checkboxList.length === data.list.length && data.list.length !== 0) {
    data.selected = true;
  } else {
    data.selected = false;
  }
};
const totalPrice = () => {
  console.log("dd");
  let total = 0;
  for (let i = 0; i < data.checkboxList.length; i++) {
    total += data.checkboxList[i].price * data.checkboxList[i].number;
  }
  return total;
};

const sub = (value) => {
  value.number--;
  if (value.number < 1) {
    value.number = 1;
  }
};
const add = (value) => {
  value.number++;
  if (value.number > value.stock) {
    value.number = value.stock;
  }
};
const del = (index, id) => {
  data.list.splice(index, 1);
  console.log("ss", data);
  let newArr = data.checkboxList.filter((value, index) => {
    return value.id !== id;
  });
  data.checkboxList = newArr;
  checkSelect();
};
</script>

<style scoped></style>