vue suk规则

最新推荐文章于 2023-07-20 08:22:57 发布

陈一手

最新推荐文章于 2023-07-20 08:22:57 发布

阅读量753

点赞数

分类专栏： suk 文章标签： vue.js es6 前端

本文链接：https://blog.csdn.net/YuT_ian/article/details/121328438

版权

suk 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何在 Vue.js 应用中使用 `el-table` 组件来呈现数据，并利用 `cartesianProductOf` 方法生成笛卡尔积。`initDate` 方法初始化数据，`cartesianProductOf` 函数用于计算多个数组的笛卡尔积，生成表格展示的组合。博客主要探讨了前端开发中的数据处理和组件渲染。

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

<template>
  <div class="home">
    <el-table style="width: 100%" border :data="tableData">
      <el-table-column
        prop="name"
        :label="item"
        width="180"
        v-for="(item, index) in arrName"
        :key="index"
      >
        <template slot-scope="scope">
          <p>{{ scope.row[index].name }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="123" width="180">
        <template slot-scope="scope"> </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrName: [],
      tableData: [],
      list: [
        {
          goodsPrice: "0", //商品价格
          marketPrice: "0", //市场价格
          goodsStock: "0", //库存
          list:[],
          seap:''
        },
      ],
    };
  },
  created() {
    this.initDate();
  },
  methods: {
   
    initDate() {
      let list = [
        { name: "规格名1", specification: [{ name: "冰" }, { name: "热" }] },
        {
          name: "规格名2",
          specification: [{ name: "全糖" }, { name: "半塘" }],
        },
        {
          name: "规格名3",
          specification: [
            { name: "半甜" },
            { name: "很甜" },
            { name: "一点点甜" },
          ],
        },
      ];

      let arr = list.map((item) => item.specification);
      this.arrName = list.map((item) => item.name);
      let allArr = this.cartesianProductOf(...arr);
      this.tableData = allArr;
      console.log("allArrallArrallArr", allArr, "arrName", this.arrName);
      // 规则名
    },
    cartesianProductOf() {
      let params = {
        goodsPrice: "0", //商品价格
        marketPrice: "0", //市场价格
        goodsStock: "0", //库存
      };
      return Array.prototype.reduce.call(
        arguments,
        function (a, b) {
          var ret = [];
          a.forEach(function (a) {
            b.forEach(function (b) {
              ret.push(a.concat([b]));
            });
          });
          console.log(ret,99999)
          return ret;
        },
        [[]]
      );
    },
  },

};
</script>