vue+Element plus实现商品规格练习（sku列表）

~柠凉id

于 2023-04-22 14:57:19 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/m0_71933813/article/details/130304889

版权

本文通过Vue和Element Plus组件库，详细介绍了如何实现商品规格功能，包括添加、删除规格和规格值，以及组合规格生成表格数据的操作，最终展示了一个完整的商品SKU列表功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：

初始状态

2.点击“添加规格”按钮，添加一组规格内容

3.点击“x”按钮，删除该规格内容

4.点击“添加规格值”按钮，添加一组规格值内容

5.点击“x”按钮，删除该规格值内容

6.点击“刷新”按钮，对上面的规格进行组合，得到表格数据

7.最多添加3组规格内容

8.具体代码

<template>
  <div class="textlist">
    <div class="textlist-data">
      <div class="textlist-but">
        <el-button @click="addCreata" style="background-color: #f56643;color: white;" :icon="Plus">添加按钮</el-button>
      </div>
      <div>
        <template v-for="itemd in listdata.value">
          <

最低0.47元/天解锁文章