element根据输入,动态生成表格(版本二)

原创 已于 2025-08-04 22:35:47 修改 · 464 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript
于 2025-08-04 22:34:32 首次发布

在这里插入图片描述

<template>
  <div class="sku-edit-simple">
    <el-form ref="skuForm" label-width="110px">
      <!-- SPU规格管理 -->
      <el-form-item label="spu规格" required>
        <div class="spec-container">
          <div 
            v-for="(spec, specIndex) in specifications" 
            :key="specIndex" 
            class="spec-row"
          >
            <!-- 规格名称 -->
            <div class="spec-header">
              <el-select
                v-model="spec.name"
                filterable
                allow-create
                placeholder="选择或输入规格名称"
                size="small"
                style="width: 200px;"
                @change="onSpecNameChange(specIndex, $event)"
                @blur="validateSpecName(specIndex)"
              >
                <el-option
                  v-for="option in specOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.label"
                />
              </el-select>
              
              <!-- 添加规格按钮 -->
              <el-button
                type="text"
                icon="el-icon-circle-plus"
                size="small"
                @click="addSpecification"
                class="add-btn"
              />
              
              <!-- 删除规格按钮 -->
              <el-button
                v-if="specifications.length > 1"
                type="text"
                icon="el-icon-remove"
                size="small"
                @click="removeSpecification(specIndex)"
                class="remove-btn"
              />
            </div>
            
            <!-- 规格值列表 -->
            <div class="spec-values">
              <div 
                v-for="(value, valueIndex) in spec.values" 
                :key="valueIndex"
                class="value-item"
              >
                <el-input
                  v-model="spec.values[valueIndex]"
                  placeholder="输入规格值"
                  size="small"
                  style="width: 120px;"
                  @blur="validateSpecValue(specIndex, valueIndex)"
                />
                
                <!-- 添加规格值按钮 -->
                <el-button
                  type="text"
                  icon="el-icon-circle-plus"
                  size="small"
                  @click="addSpecValue(specIndex)"
                  class="add-btn"
                />
                
                <!-- 删除规格值按钮 -->
                <el-button
                  v-if="spec.values.length > 1"
                  type="text"
                  icon="el-icon-remove"
                  size="small"
                  @click="removeSpecValue(specIndex, valueIndex)"
                  class="remove-btn"
                />
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- SKU映射表格 -->
      <el-form-item label="映射sku" required>
        <div class="sku-table-container">
          <el-table
            :data="skuList"
            border
            size="small"
            style="width: 100%"
            empty-text="请先添加规格和规格值"
          >
            <!-- 动态规格列 -->
            <el-table-column
              v-for="(spec, index) in specifications"
              :key="index"
              :label="spec.name || `规格${index + 1}`"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.specValues[index] || '-' }}</span>
              </template>
            </el-table-column>
            
            <!-- 商品条码 -->
            <el-table-column
              prop="barcode"
              label="商品条码"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.barcode"
                  size="small"
                  placeholder="请输入条码"
                />
              </template>
            </el-table-column>
            
            <!-- 售价 -->
            <el-table-column
              prop="price"
              label="售价"
              width="120"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  size="small"
                  placeholder="请输入售价"
                  type="number"
                />
              </template>
            </el-table-column>
            
            <!-- 市场价 -->
            <el-table-column
              prop="marketPrice"
              label="市场价"
              width="120"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.marketPrice"
                  size="small"
                  placeholder="请输入市场价"
                  type="number"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOptions } from '@/api/common/common'

export default {
  name: 'SkuEditSimple',
  props: {
    // 编辑模式下的初始数据
    initialData: {
      type: Object,
      default: () => ({
        specifications: [],
        skuList: []
      })
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 规格选项
      specOptions: [],
      // 规格列表
      specifications: [
        {
          name: '',
          values: ['']
        }
      ],
      // SKU列表
      skuList: [],
      // 验证错误信息
      validationErrors: []
    }
  },
  watch: {
    // 监听规格变化，重新生成SKU列表
    specifications: {
      handler: 'generateSkuList',
      deep: true
    }
  },
  mounted() {
    this.initData()
    this.loadSpecOptions()
  },
  methods: {
    // 初始化数据
    initData() {
      if (this.isEdit && this.initialData.specifications.length > 0) {
        this.specifications = JSON.parse(JSON.stringify(this.initialData.specifications))
        this.skuList = JSON.parse(JSON.stringify(this.initialData.skuList))
      }
    },
    
    // 加载规格选项
    async loadSpecOptions() {
      try {
        const response = await getOptions({ option_names: ['spuSpecOptions'] })
        this.specOptions = response.data.spuSpecOptions || []
      } catch (error) {
        console.error('加载规格选项失败:', error)
        this.$message.error('加载规格选项失败')
      }
    },
    
    // 添加规格
    addSpecification() {
      this.specifications.push({
        name: '',
        values: ['']
      })
    },
    
    // 删除规格
    removeSpecification(index) {
      this.$confirm('确定要删除这个规格吗？删除后相关的SKU数据也会被删除。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.specifications.splice(index, 1)
        this.$message.success('规格删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    
    // 添加规格值
    addSpecValue(specIndex) {
      this.specifications[specIndex].values.push('')
    },
    
    // 删除规格值
    removeSpecValue(specIndex, valueIndex) {
      this.$confirm('确定要删除这个规格值吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.specifications[specIndex].values.splice(valueIndex, 1)
        this.$message.success('规格值删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    
    // 规格名称变化处理
    onSpecNameChange(specIndex, value) {
      this.validateSpecName(specIndex)
      this.generateSkuList()
    },
    
    // 验证规格名称
    validateSpecName(specIndex) {
      const spec = this.specifications[specIndex]
      
      // 检查是否为空
      if (!spec.name || spec.name.trim() === '') {
        this.$message.warning('规格名称不能为空')
        return false
      }
      
      // 检查是否重复
      const duplicateIndex = this.specifications.findIndex((s, index) => 
        index !== specIndex && s.name === spec.name
      )
      
      if (duplicateIndex !== -1) {
        this.$message.warning('规格名称不能重复')
        return false
      }
      
      return true
    },
    
    // 验证规格值
    validateSpecValue(specIndex, valueIndex) {
      const spec = this.specifications[specIndex]
      const value = spec.values[valueIndex]
      
      // 检查是否为空
      if (!value || value.trim() === '') {
        this.$message.warning('规格值不能为空')
        return false
      }
      
      // 检查是否重复
      const duplicateIndex = spec.values.findIndex((v, index) => 
        index !== valueIndex && v === value
      )
      
      if (duplicateIndex !== -1) {
        this.$message.warning('规格值不能重复')
        return false
      }
      
      return true
    },
    
    // 生成SKU列表
    generateSkuList() {
      // 过滤有效的规格名（有名称且有值）
      const validSpecs = this.specifications.filter(spec =>
        // 规格名称不为空
        spec.name && spec.name.trim() !== '' && 
        // 规格值数组不为空
        spec.values.length > 0 && 
        // 至少有一个非空的规格值
        spec.values.some(value => value && value.trim() !== '')
      )
      
      if (validSpecs.length === 0) {
        this.skuList = []
        return
      }
      
      // 生成规格值组合
      const combinations = this.generateCombinations(validSpecs)
      
      // 生成SKU列表
      this.skuList = combinations.map(combination => {
        // 查找是否已存在相同的SKU（编辑模式）
        const existingSku = this.findExistingSku(combination)
        
        return {
          id: existingSku ? existingSku.id : this.generateId(),
          specValues: combination,
          barcode: existingSku ? existingSku.barcode : '',
          price: existingSku ? existingSku.price : '',
          marketPrice: existingSku ? existingSku.marketPrice : ''
        }
      })
    },
    
    // 生成规格值组合
    generateCombinations(specs, currentCombination = [], index = 0) {
      if (index >= specs.length) {
        return [currentCombination]
      }
      
      const combinations = []
      const spec = specs[index]
      const validValues = spec.values.filter(value => value && value.trim() !== '')
      
      for (const value of validValues) {
        const newCombination = [...currentCombination, value]
        const subCombinations = this.generateCombinations(specs, newCombination, index + 1)
        combinations.push(...subCombinations)
      }
      
      return combinations
    },
    
    // 查找已存在的SKU（编辑模式）
    findExistingSku(combination) {
      if (!this.isEdit) return null
      
      return this.skuList.find(sku => {
        if (sku.specValues.length !== combination.length) return false
        
        return combination.every((value, index) => 
          sku.specValues[index] === value
        )
      })
    },
    
    // 生成唯一ID
    generateId() {
      return Date.now() + Math.random().toString(36).substr(2, 9)
    },
    
    // 验证数据
    validate() {
      this.validationErrors = []
      
      // 验证规格
      for (let i = 0; i < this.specifications.length; i++) {
        const spec = this.specifications[i]
        
        if (!spec.name || spec.name.trim() === '') {
          this.validationErrors.push(`第${i + 1}个规格名称不能为空`)
          continue
        }
        
        const validValues = spec.values.filter(value => value && value.trim() !== '')
        if (validValues.length === 0) {
          this.validationErrors.push(`规格"${spec.name}"至少需要一个规格值`)
          continue
        }
        
        // 检查规格值重复
        const uniqueValues = new Set(validValues)
        if (uniqueValues.size !== validValues.length) {
          this.validationErrors.push(`规格"${spec.name}"存在重复的规格值`)
        }
      }
      
      // 检查规格名称重复
      const specNames = this.specifications.map(spec => spec.name).filter(name => name && name.trim() !== '')
      const uniqueSpecNames = new Set(specNames)
      if (uniqueSpecNames.size !== specNames.length) {
        this.validationErrors.push('存在重复的规格名称')
      }
      
      return this.validationErrors.length === 0
    },
    
    // 获取数据
    getData() {
      if (!this.validate()) {
        this.$message.error('数据验证失败，请检查输入')
        return null
      }
      
      return {
        specifications: this.specifications.filter(spec => 
          spec.name && spec.name.trim() !== '' && 
          spec.values.some(value => value && value.trim() !== '')
        ),
        skuList: this.skuList
      }
    },
    
    // 重置数据
    reset() {
      this.specifications = [{ name: '', values: [''] }]
      this.skuList = []
      this.validationErrors = []
    }
  }
}
</script>

<style lang="scss" scoped>
.sku-edit-simple {
  padding: 20px;
  
  .spec-container {
    .spec-row {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      background-color: #fafafa;
      
      .spec-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        
        .add-btn {
          margin-left: 10px;
          color: #409eff;
          
          &:hover {
            color: #66b1ff;
          }
        }
        
        .remove-btn {
          margin-left: 5px;
          color: #f56c6c;
          
          &:hover {
            color: #f78989;
          }
        }
      }
      
      .spec-values {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        
        .value-item {
          display: flex;
          align-items: center;
          
          .add-btn {
            margin-left: 5px;
            color: #409eff;
            
            &:hover {
              color: #66b1ff;
            }
          }
          
          .remove-btn {
            margin-left: 5px;
            color: #f56c6c;
            
            &:hover {
              color: #f78989;
            }
          }
        }
      }
    }
  }
  
  .sku-table-container {
    margin-top: 10px;
  }
}
</style>
vvvbird
关注
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
jquery实现动态生成表格
11-13
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
动态生成表格
Mr_115的博客
11-05 2305
动态生成表格
vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格
qq_24441205的博客
12-26 2019
这时候如果有一个动态表格，表格的表头信息从后台获取（或在js中配置），那日后修改胡萝卜表的属性（增加或删除表字段）时就不用修改前端页面代码，长远一点来看，日后这个厂生产别的蔬菜水果也需要信息展示时，这个表格就可以复用（把表格抽出来当一个模板，需要用的页面引用即可，这个代码我有时间会从项目中整理出来）。现有的萝卜信息：编号（id）、名称（name）、保质期（age）、特点（remark），但是日后会有扩展信息，可能会加上颜色、体积等信息。改变tableColumnList的值，从而动态改变表格的列。
element根据输入,动态生成表格(版本一)
最新发布
vvvbird的专栏
10-31 731
场景:后台页面根据商品规格和规格值，动态(增删改查)在表格中生成对应的sku. 如图: 代码如下: edit.html <template xmlns=""> <div class="app-container"> <el-form ref="form" :model="form" label-width="80px" autocomplete="off" @submit.native.prevent> <h3>基础信息</h3
最详细的JS动态创建表格以及实现分页!
Jet_Lover的博客
06-16 4365
S动态创建表格以及实现分页效果图完整的HTML代码生成表格搜索功能表格下面的功能左下的页码展示分页 效果图 先看效果，在没有数据的情况下。(图一) 完整页面在搜索框输入关键字4，并查找的情况下。(图二) 完整的HTML代码 话不多说先上完整的html代码，为了方便我把css写在一起的。 <div> <div style="overflow: hidden"> <input type="text" class="
vue3 + Element Plus动态生成表格，并实现内容可编辑
热门推荐
ymzhao
03-07 5万+
基于 vue3 & element plus 的可编辑表格
基于Element组件下动态生成多级表头以及数据
这是一条咸鱼的博客
12-20 6360
介绍 element是一套基于vue的组件，本文主要介绍如何根据后端传输数据来动态生成表格。 代码 html 利用vue里的for循环来动态生成表头，再利用if语句判断是否有二级表头，并将对应key赋值给label和prop <template id="table"> <el-table :data="tableData" :stripe=true :border=true height="80%" class="tablehead"> <!-- for
【基于HTML5的网页设计及应用】——动态生成表格
shsjssnn的博客
03-18 1724
【基于HTML5的网页设计及应用】——动态生成表格
JavaScript实现动态生成表格
10-15
主要为大家详细介绍了JavaScript实现动态生成表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html动态表格
xiaoerbuyu1233的博客
02-04 792
【代码】html动态表格。
elementUI中带输入建议的input使用
水冰月的小兔子的博客
08-15 2万+
项目中有一个需求是在输入框输入文字的时候带出有相应内容的提示建议，第一个想法是自己写一个定位元素控制显示隐藏，然后前端进行筛选，仔细思考之后发现有很多问题，比如前端数据需要把数据全部请求过来，但是数据非常多的时候这个方法就不适用，并且还要自己去写模糊查询，下拉框的动画等也需要自己去写，所以我就放弃了自己造轮子的想法，改用elementUI中的组件。 autocomplete 是一个可带输入建议的...
案例：动态生成表格
m0_65085680的博客
10-06 1298
【代码】案例：动态生成表格。
动态生成表格案例
m0_59030524的博客
02-22 921
<style> table { width: 500px; margin: 100px auto; text-align: center; /* 使边框的重叠部分不重叠 */ border-collapse: collapse; } th, td { border: 1px solid..
动态生成表格案例（HTML+CSS+JS）
m0_48375854的博客
12-21 5943
在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。 实现代码为： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;
JavaScript实现动态表格的创建
qq_38805665的博客
08-03 1653
全部实现表格的动态创建。 要求：表格表头内容为”编号，学号，姓名，年龄，手机号，操作”， 操作列包括两个按钮【添加】【删除】可以动态为这个表格添加行，也可以删除行。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现动态表格的设计</title> </head> <body><button
js案例:动态生成表格
m0_63400611的博客
11-29 1270
分析 因为学生数据都是动态的,需要js动态生成,这里我们模拟数据,自己定义好数据,数据采取对象形式存储 所有的数据都放到tbody里面的行里面 需要循环创建多个行(对应人数) 每个行里面有很多单元格(对应里面的数据),据徐使用循环创建多个单元格,并把数据存入里面(for循环嵌套) 最后一列单元格是删除,需要单独创建单元格 代码 <html> <head> <meta charset="utf-8"> <title>333333</title
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值