代码示例

<template>
  <div id="app">
    <p>表单数据</p>
    <table>
      <thead>
        <tr>
          <td>
            <input type="checkbox" v-model="data.selected" />
          </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" />
          </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 { computed, reactive, watch } 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 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();
};

let flag = true;

watch(
  () => data.selected,
  (newValue, oldValue) => {
    console.log("newValue:", newValue);
    console.log("oldValue:", oldValue);
    if (newValue) {
      data.checkboxList = data.list;
    } else {
      if (flag) {
        data.checkboxList = [];
      }
    }
  }
);

watch(
  () => data.checkboxList,
  (newValue, oldValue) => {
    if (
      data.checkboxList.length === data.list.length &&
      data.list.length !== 0
    ) {
      data.selected = true;
      flag = true;
    } else {
      data.selected = false;
      flag = false;
    }
  }
);

const totalPrice = computed(() => {
  return data.checkboxList.reduce(
    (total, item) => total + item.price * item.number,
    0
  );
});
</script>

<style scoped></style>