vue3+ts使用笛卡尔积算法将数据进行交叉处理和表格合并处理

最新推荐文章于 2024-06-21 18:11:32 发布

℘团子এ

最新推荐文章于 2024-06-21 18:11:32 发布

阅读量607

点赞数

分类专栏： vue3 文章标签：前端 vue.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/2202_75509848/article/details/128993751

版权

vue3 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript实现笛卡尔积算法来对二维数组进行数据交叉处理，以及在HTML中利用Vue.js框架进行表格的合并处理，特别是通过`:span-method`属性来控制表格单元格的合并。示例代码展示了具体的实现细节。

摘要由CSDN通过智能技术生成

一、使用笛卡尔积算法将数据进行交叉处理

// 使用笛卡尔积算法将数据进行交叉处理
   var valueList = [["湖南","湖北"],["河南","河北"]]
  var skuArr = valueList.reduce((pre: string[][], next: any[]) => {
    var array: string[][] = []
    pre.forEach(item1 => {
      next.forEach(item2 => {
        array.push(item1.concat([item2]))
        return array
      })
    })
    return array
  }, [[]])
  console.log(skuArr, "skuArr");

说明：变的是valueList这个需要处理的二维数组，不变的是算法

二、表格合并处理

在html中

<el-table :data="form.skuList" :span-method="objectSpanMethod" style="width: 100%" border>
    <el-table-column v-for="item in form.specificationList.filter((item: any) => item.values.length > 0)" width="100"
      align="center" :prop="'sku_' + item.title" :label="item.title" />
    <el-table-column prop="SkuIds" label="SkuId" align="center" />
    <el-table-column prop="vipPrice" label="￥VIP价(元)" width="150" align="center">
      <template #default="scope">
        <el-input-number v-model="scope.row.vipPrice" 
        size="small" :min="1" @change="handleChange" />
      </template>
    </el-table-column>
    <el-table-column prop="originalPrice" label="吊牌价" width="150" align="center">
      <template #default="scope">
        <el-input-number v-model="scope.row.originalPrice" 
            size="small" :min="1" @change="handleChange" />
      </template>
    </el-table-column>
    <el-table-column prop="price" label="价格" width="150" align="center">
      <template #default="scope">
        <el-input-number v-model="scope.row.price" size="small" :min="1" 
        @change="handleChange" />
      </template>
    </el-table-column>
    <el-table-column prop="barCode" label="条形码" width="250" align="center">
      <template #default="scope">
        <el-input v-model="scope.row.barCode" size="small" style="width:200px;">
          <template #append>
            <el-button @click="scope.row.barCode = new Date().getTime()" size="small">随机
            </el-button>
          </template>
        </el-input>
      </template>
    </el-table-column>
  </el-table>

说明：主要是在table标签上添加 :span-method="objectSpanMethod"属性，后面的内容不重要

在js中

//合并表格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  //拿到第一列要合并的行数
  let specList = form.value.specificationList.filter((e: any) => e.values?.length > 0);

  if (columnIndex < specList.length - 1) {
    let rowSpanNum = 1;
    for (let i = columnIndex + 1; i < specList.length; i++) {
      //依次拿到每一列要合并的行数
      rowSpanNum *= specList[i].values.length;
    }
    if (rowIndex % rowSpanNum === 0) {
      //当条件成立时，即合并行数
      return { rowspan: rowSpanNum, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}

说明：具体看graduation项目中的goodsmanage/ProductCreate.vue文件