【案例】根据商品的颜色进行分组,同一种颜色的商品可以对应多种尺寸、价格以及库存

news2025/1/23 17:51:19

效果展示

效果说明

 输入商品的颜色、尺寸后点击添加按钮,即可将对应的商品信息添加到下方的表格当中,表格中除了会显示商品的颜色和尺寸之外,还会显示商品的价格和库存,并且可以对商品的价格和库存进行修改,并且根据颜色进行分组将相同颜色值的数据都会添加在一个大行当中。

效果实现代码

第一步:创建项目

yarn create vite sku

第二步:安装项目所需要的依赖

yarn
yarn add sass sass-loader
yarn add vue-router
yarn add path
yarn add element-plus
yarn add -D unplugin-auto-import
yarn add unplugin-vue-components@0.26.0

注意:

安装 unplugin-vue-components 的时候要指导其版本为0.26.0,否则默认安装的为最新版本0.27.0,等到配置完element-plus组件的自动导入时会导致样式不生效的问题。

第三步: 配置别名@,以及配置element-plus的自动导入

vue.configchuan.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
});

第四步:创建Home页面并配置路由文件

src/router/index.js

import {createRouter,createWebHistory} from 'vue-router'

const routes = [
  {
    path: '/',
    component:()=>import('@/views/Home.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

第五步:引入路由文件

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

第六步:在创建的Home页面中编写代码

<template>
  <div>
    <div>
      <el-input v-model="color" placeholder="请输入颜色" />
      <el-input v-model="size" placeholder="行输入型号" />
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <div>
      <table width="1000" cellspacing="0">
        <!-- 表格的标题部分 -->
        <tr>
          <th
            v-for="(item, index) in showThData"
            :key="index"
            class="thStyle"
            :style="{ borderLeft: index === 0 ? '1px solid #eee' : '' }"
          >
            {{ item.title }}
          </th>
        </tr>
        <tr v-if="!tableData.length">
          <td :colspan="thData.length" class="noData">暂无数据</td>
        </tr>
        <!-- 表格的内容主题部分 -->
        <tr v-for="(obj, key) in groupData" :key="key" class="size tdbgColor">
          <!-- 颜色列 -->
          <td class="colorBorder" :style="tdStyle('color')">{{ key }}</td>
          <!-- 尺寸列 -->
          <td>
            <!-- 每种尺寸独占一行 -->
            <tr v-for="(item, index) in obj" :key="index">
              <td :style="tdStyle('size')">{{ item.size }}</td>
            </tr>
          </td>
          <!-- 价格列 -->
          <td>
            <!-- 每种尺寸的价格独占一行 -->
            <tr v-for="(item, index) in obj" :key="index">
              <td :style="tdStyle('size')">
                <!-- 
                  设置 precision 属性可以控制数值精度,接收一个 Number
                  当设置number为2的时候为保留两位小数
                 -->
                <el-input-number
                  v-model="item.price"
                  :precision="2"
                  :min="0"
                  @change="handleChange"
                />
              </td>
            </tr>
          </td>
          <!-- 库存列 -->
          <td>
            <!-- 每种尺寸的库存独占一行 -->
            <tr v-for="(item, index) in obj" :key="index">
              <td :style="tdStyle('size')">
                <!-- 
                  设置 precision 属性可以控制数值精度,接收一个 Number
                  当设置number为0的时候为保留整数【四舍五入】
                 -->
                <el-input-number
                  v-model="item.stock"
                  :precision="0"
                  :min="0"
                  @change="handleChange"
                />
              </td>
            </tr>
          </td>
        </tr>
      </table>
    </div>
    <!-- <el-button type="primary" @click="submit">提交</el-button>
    <div v-show="isShow">{{ showGroupData }}</div>  -->
  </div>
</template>

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

const handleChange = (value) => {
  console.log(value);
};

const tableData = ref([]);
const thData = ref([
  { title: "颜色", text: "color" },
  { title: "尺寸", text: "size" },
  { title: "价格", text: "price" },
  { title: "库存", text: "stock" },
]);
const showThData = ref(thData);
const color = ref(""); //颜色
const size = ref(""); //尺寸
const groupData = ref({}); //将添加的数据按照颜色进行分组
const showGroupData = ref({});
// 点击添加按钮将数据添加到下方表格中
const add = () => {
  tableData.value.push({
    color: color.value,
    size: size.value,
    price: 0,
    stock: 0,
  });
  sort();
};
// 对添加的数据进行分组处理,当多个颜色的值相同时按照第一个出现的位置进行排序
const sort = () => {
  // 创建一个映射表来记录每种颜色首次出现的索引
  const colorIndices = new Map();
  tableData.value.forEach((item, index) => {
    if (!colorIndices.has(item.color)) {
      colorIndices.set(item.color, index);
    }
  });

  // 根据颜色首次出现的索引进行排序
  tableData.value.sort((a, b) => {
    // 获取a和b的颜色首次出现的索引
    const indexA = colorIndices.get(a.color);
    const indexB = colorIndices.get(b.color);

    // 如果首次出现的索引相同,则保持原始顺序(可选,取决于具体需求)
    // 这里假设原始顺序应当保持,如果不需要保持则直接返回 indexA - indexB 即可
    return indexA === indexB
      ? tableData.value.indexOf(a) - tableData.value.indexOf(b)
      : indexA - indexB;
  });
  // 使用reduce方法对数据进行分组处理
  groupData.value = tableData.value.reduce((acc, curr) => {
    const color = curr.color;
    if (!acc[color]) {
      acc[color] = [];
    }
    acc[color].push(curr);
    return acc;
  }, {});
};
// 单元格的样式设置
const tdStyle = (type) => {
  let style = { borderBottom: "1px solid #eee" };
  if (type === "color") {
    style.borderLeft = "1px solid #eee";
  } else {
    style.borderRight = "1px solid #eee";
  }
  return style;
};
const isShow = ref(false); //数据是否显示
// 点击提交按钮将数据显示在下方
const submit = () => {
  showGroupData.value = { ...groupData.value, title: thData.value };
  isShow.value = true;
};
</script>
<style lang="scss" scoped>
.el-input {
  margin: 10px;
  width: 200px;
}
table {
  margin: 10px;
  text-align: center;
  th,
  td {
    width: 250px;
    height: 50px;
  }
  th {
    color: #888;
  }
  .thStyle {
    border: 1px solid #eee;
    border-left: none;
  }
  .size {
    border: none;
  }
  // 设置样式表格隔行显示背景色
  .tdbgColor:nth-child(2n + 1) {
    background: #d1edff59;
  }
}
.colorBorder {
  border-right: 1px solid #eee;
}
.price {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.noData {
  border: 1px solid #eee;
  border-top: none;
  color: #ccc;
}
</style>

通过以上步骤即可实现效果图中所展示的效果

由于对于element-plus组件库中的el-table的合并单元格的方法没有写明白所以就用了原生的table书写的,如果有哪位大佬可以使用el-table实现该效果,还请不吝赐教。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1681378.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

外贸客户采集软件有哪些?

外贸客户采集软件可以帮助企业收集潜在客户的信息&#xff0c;以便进行市场分析和客户开发。以下是一些常用的外贸客户采集软件&#xff1a; 易谷歌地图数据采集大师&#xff1a;基于谷歌地图数据采集的软件&#xff0c;能够采集任意国家、地区的企业地址、电话号码、邮件地址等…

Visual Studio Code 扩展程序Text Edits

需求 比如把Scarzombie_Monster全部转换为大写或者小写 安装 Text Edits 直接搜索安装即可 使用 假如要把Scarzombie_Monster全部转为大写&#xff0c;选中右键选中 To Upper Case或者直接快捷键shiftAltU即可

2A 150KHz 40V Buck DC to DC 转换器XL1509

前言&#xff1a; 该器件仅做介绍&#xff0c;不推荐在新设计中使用。 新设计应尽量使用MHZ开关频率&#xff0c;以降低电感量&#xff0c;从而降低成本。 新设计应使用同步DCDC降压转换器。 XL1509丝印和封装 引脚定义 XL1509管脚描述 管脚编号 管脚名称 管脚描述 1 电压输入…

未授权访问:Rsync 未授权访问漏洞

目录 1、漏洞原理 2、环境搭建 3、未授权访问 4、利用rsync下载任意文件 5、利用rsync反弹shell 防御手段 今天继续学习各种未授权访问的知识和相关的实操实验&#xff0c;一共有好多篇&#xff0c;内容主要是参考先知社区的一位大佬的关于未授权访问的好文章&#xff0c…

linux系统查看服务器硬件信息

1、查看服务器型号、序列号 # dmidecode|grep "System Information" -A9 | egrep "Manufacturer|Product|Serial" 2、查看主板型号 # dmidecode |grep -A16 "System Information$" 或 dmidecode -t1 3、查看BIOS信息 # dmidecode -t bios 4、…

服务器防火墙有什么用防护策略

随着互联网的飞速发展&#xff0c;服务器的安全问题日益凸显。为了保护服务器免受网络攻击和恶意入侵的威胁&#xff0c;人们引入了防火墙的概念。服务器防火墙作为保护服务器的第一道防线&#xff0c;具有重要的作用。那么服务器防火墙有什么用&#xff1f; 首先&#xff0c;服…

用docker命令行操作远程的Dockerd daemon服务

本地安装 Dockerd 服务太耗本机磁盘空间了&#xff0c;共用已有的Dockerd服务能够节省一部分空间 修改 Dockerd 服务启动文件&#xff0c;增加TCP监听方式 Dockerd 服务默认监听方式为 Unix Domain Socket &#xff0c;只允许本机连接&#xff0c;想要能够远程连接&#xff0…

java入门详细教程之集合的理解与应用

一、Collenction集合 数组和集合的区别 长度 数组的长度是不可变的,集合的长度是可变的 数据类型 数组可以存基本数据类型和引用数据类型 集合只能存引用数据类型,如果要存基本数据类型,需要存对应的包装类 Collection 集合概述和使用 Collection集合概述​&#xff1a; 是单…

【C++】基础知识

文章目录 一、VS2022创建C项目 1. 相关工具安装 2. 测试 二、【快速】面向对象 1. 标准C代码 2. 简单的面向对象示例 3. 类与对象 4. 访问成员 5. this指针 6. 构造函数 7. 析构函数 8. 函数重载 9. 应用&#xff1a;老王装枪 三、【快速】封装 1. 三种权限 2.…

springcloud+nocos从零开始

首先是去nacos官网下载最新的包&#xff1a;Nacos 快速开始 | Nacos win下启动命令&#xff1a;startup.cmd -m standalone 这样就可以访问你的nacos 了。 添加一个配置&#xff0c;记住你的 DataId,和Group名字。 创建一个pom项目&#xff0c;引入springCloud <?xml ve…

图片预处理技术:让字迹模糊的发票图片能准确识别出来

在数字化时代&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术已广泛应用于各种领域&#xff0c;特别是在处理大量文档数据时&#xff0c;OCR技术的运用大大提升了工作效率。然而&#xff0c;当面对字迹模糊、图像质量不佳的…

Facebook企业户/在Facebook上做推广有什么好处?

想到出海&#xff0c;必会想到Facebook作为世界上最大的社交网络&#xff0c;Facebook拥有难以想象的用户数量&#xff0c;流量大到没朋友。近年来也是独立站卖家获取流量的有力工具之一。独立站卖家在Facebook上做广告的好处&#xff1f; Facebook&#xff0c;Google 开企业广…

Redis - hiredis源码安装和接口使用介绍

一、hiredis源码安装说明 本文创作基于 hiredis - v1.2.0版本 1.简介 hiredis是一个用于与Redis交互的C语言客户端库。它提供了一组简单易用的API&#xff0c;使开发人员可以轻松地连接到Redis服务器&#xff0c;并执行各种操作&#xff0c;如设置和获取键值对、执行命令、订阅…

C#知识|上位机子窗体嵌入主窗体方法(实例)

哈喽,你好啊,我是雷工! 上位机开发中,经常会需要将子窗体嵌入到主窗体, 本节练习C#中在主窗体的某个容器中打开子窗体的方法。 01 需求说明 本节练习将【账号管理】子窗体在主窗体的panelMain容器中打开。 账号管理子窗体如下: 主窗体的panelMain容器位置如图: 02 实现…

电子合同怎么盖章的

数字证书盖章&#xff1a;利用个人或企业的数字证书进行盖章。数字证书作为数字身份证明&#xff0c;确保了电子签名和盖章的可信度。通过加密技术&#xff0c;确保合同内容不被篡改&#xff0c;盖章过程完成后&#xff0c;合同具有法律效力。 时间戳盖章&#xff1a;在电子合…

【神经网络与深度学习】Transformer原理

transformer ENCODER 输入部分 对拆分后的语句x [batch_size, seq_len]进行以下操作 Embedding 将离散的输入&#xff08;如单词索引或其他类别特征&#xff09;转换为稠密的实数向量&#xff0c;以便可以在神经网络中使用。位置编码 与RNN相比&#xff0c;RNN是一个字一个字…

C++进阶之路:何为默认构造函数与析构函数(类与对象_中篇)

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

Xilinx 7系列FPGA的时钟管理

在7系列FPGA中&#xff0c;时钟管理单元&#xff08;CMT&#xff09;包含了混合模式时钟管理器&#xff08;MMCM&#xff09;和锁相环&#xff08;PLL&#xff09;。PLL是包含了MMCM功能的一个子集。CMT骨干网可用于链接CMT的时钟功能。CMT图&#xff08;图3-1&#xff09;展示…

数字功放-改善液晶显示屏音频性能,重塑音频体验

随着液晶电视、液晶显示器以及等离子电视屏幕的尺寸不断增大&#xff0c;音频性能要求相应提高&#xff1b;数字功放芯片作为音频解决方案&#xff1b;不仅为音频设备带来更高的效率和更低的功耗&#xff0c;同时在显示屏上进一步提高了平板显示器的音质&#xff0c;使之具有了…

位运算概述

首先 位运算这个东西在考试中十分容易考&#xff0c;所以要多多看一看位运算的相关知识&#xff0c;多刷一刷题之类的。 位运算的概念 位运算就是二进制数据进行运算的运算符。 注意&#xff1a;通常我们用二进制补码来表示&#xff0c;补码的符号位也是要参与运算的。 通常的…