vue3+Ant Design实现购物车

 

<template>
  <div>
    <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
      :data-source="data" :pagination="{ pageSize: 4 }">
      <template v-slot:bodyCell="{ column, record }">
        <div v-if="column.dataIndex === 'proction'">
          <a-button :disabled="!(record.proction > 1)" @click="splice(record.key)">-</a-button>
          <input style="width:50px" type="text" placeholder='1' v-model="record.proction">
          <a-button @click="add(record.key)">+</a-button>
        </div>
        <div v-if="column.dataIndex === 'delete'">
          <span @click="detele(record.key)">{{ record.delete }}</span>
        </div>
      </template>
    </a-table>


    <div style="margin-bottom: 16px">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        结算
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `已选 ${countNum} 个` }}
        </template>
      </span><span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `总计 ${countAll} 元` }}
        </template>
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, ref } from 'vue';
import { number } from 'vue-types';

type Key = string | number;

interface DataType {
  key: Key;
  name: string;
  price: number;
  proction: number;
  delete: string
}

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '价格',
    dataIndex: 'price',
  },
  {
    title: '数量',
    dataIndex: 'proction',

  },
  {
    title: '删除',
    dataIndex: 'delete'
  }
];

const data: DataType[] = [];
for (let i = 0; i < 12; i++) {
  data.push({
    key: i,
    name: `商品 ${i}`,
    price: 32 + i,
    proction: 1,
    delete: '删除'
  });
}

export default defineComponent({
  setup() {

    const selectedData = ref<any>([]);
    const state = reactive<{
      selectedRowKeys: Key[];

      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,


    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    const start = () => {
      state.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };
    let countAll = ref<number>(0);//总价格
    let countNum = ref<number>(0)//总数量
    const onSelectChange = (selectedRowKeys: Key[], selectedRows: any) => {
      countAll.value = 0
      countNum.value = 0
      // console.log('selectedRowKeys changed: ', selectedRowKeys,selectedRows);
      state.selectedRowKeys = selectedRowKeys;
      console.log(state.selectedRowKeys);
      // selectedRows选中行的值
      if (selectedRows.length > 0) {
        for (let i = 0; i < selectedRows.length; i++) {
          countNum.value += selectedRows[i]['proction']
          countAll.value += selectedRows[i]['proction'] * selectedRows[i]['price']
        }

      };
    }
    // 减少数量
    const splice = (id: number) => {
      dataAdd.value = data.find((obj) => {
        return obj.key === id
      })
      a.value = state.selectedRowKeys.includes(id)
      //  console.log(state.selectedRowKeys.includes(1));
      if (a.value == true) {
        countNum.value -= 1
        countAll.value -= dataAdd.value.price
      } else {
        state.selectedRowKeys.push(id)
        countNum.value += dataAdd.value.proction
        countAll.value += dataAdd.value.price * dataAdd.value.proction
      }

    }
    // 增加数量
    let a = ref<boolean>()
    let dataAdd = ref<any>()
    const add = (id: number) => {
      // data[id].proction++;
      dataAdd.value = data.find((obj) => {
        return obj.key === id
      })
      dataAdd.value.proction++
      console.log(dataAdd.value.proction);
// 查询存不存在点击的key，返回的a是布尔值
      a.value = state.selectedRowKeys.includes(id)
      //  console.log(state.selectedRowKeys.includes(1));
      if (a.value == true) {
        countNum.value += 1
        countAll.value += dataAdd.value.price
      } else {
        state.selectedRowKeys.push(id)
        countNum.value += dataAdd.value.proction
        countAll.value += dataAdd.value.price * dataAdd.value.proction
      }
    }
    let deleteIndex = ref<number>()//选中删除的一项在data中的索引值
    //删除
    const detele = (id: number) => {
      deleteIndex.value = data.findIndex((value, index, arr) => {
        return value.key === id
      })
      console.log('deleteIndex', deleteIndex.value)


      data.splice(deleteIndex.value, 1)

      state.selectedRowKeys.splice(id,1)
      countNum.value -= data[id].proction
      countAll.value -= data[id].price * data[id].proction
    }

    return {
      data,
      columns,
      hasSelected,
      ...toRefs(state),
      countAll,
      selectedData,
      splice,
      add,
      countNum,
      a,
      detele,
      // func
      dataAdd,
      deleteIndex,
      start,
      onSelectChange,
    };
  },
});
</script>
<style scoped>
::v-deep .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #fafafa;
}

::v-deep .ant-table-tbody>tr.ant-table-row-selected>td {
  background: #dbd8d8;
}

input {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}
</style>