element表格，表格合并

最新推荐文章于 2024-02-26 17:34:38 发布
最新推荐文章于 2024-02-26 17:34:38 发布
阅读量167 收藏
点赞数
分类专栏： vue2 js 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jk200165/article/details/128190110
版权
js 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
vue2
3 篇文章 0 订阅
订阅专栏

 

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="table">
    <el-table
      :data="newTableData"
      height="500"
      :span-method="objectSpanMethod"
      border
      style="width: 70%; margin: 20px auto;"
      @select="handleSelectChange"
      @select-all="handleSelectAll"
    >
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          {{ scope.row.id ? scope.row.id : scope.row.sku.id }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{
            scope.row.goods_name
              ? scope.row.goods_name
              : scope.row.sku.goods_name
          }}
        </template>
      </el-table-column>
      <el-table-column label="规格名称">
        <template slot-scope="scope">
          {{ scope.row.sku ? scope.row.sku.sku_name : "---" }}
        </template>
      </el-table-column>

      <el-table-column label="商品编码">
        <template slot-scope="scope">
          {{ scope.row.sku ? scope.row.sku.sku_code : "---" }}
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          {{ scope.row.sku && scope.row.sku.online_price ? scope.row.sku.online_price : "---" }}
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55">
        <template slot-scope="scope">
            <el-checkbox></el-checkbox>
        </template>
      </el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "58",
          goods_name: "仔妹仔弹嘴豆干麻辣味70g",
          goods_code: "9463016960",
          goods_number: "104005",
          attribute_state: "2",
          online_price: "0.01",
          purchase_price: "120.00",
          skus: {
            status: 1,
            count: 2,
            data: [
              {
                id: "29",
                sku_id_list: "18",
                sku_code: "9463016960-2",
                sku_goods_number: "10402",
                online_price: "0.01",
                purchase_price: "110.00",
                sku_name: "1*30",
              },
              {
                id: "28",
                sku_id_list: "17",
                sku_code: "9463016960-1",
                sku_goods_number: "10401",
                online_price: "0.01",
                purchase_price: "60.00",
                sku_name: "1*1",
              },
            ],
          },
        },
        {
          id: "57",
          goods_name: "仔妹仔弹嘴豆干糊辣味70g",
          goods_code: "---",
          goods_number: "104006",
          attribute_state: "2",
          online_price: "5.00",
          purchase_price: "120.00",
          skus: {
            status: 1,
            count: 2,
            data: [
              {
                id: "27",
                sku_id_list: "18",
                sku_code: "---",
                sku_goods_number: "10404",
                online_price: "140.00",
                purchase_price: "100.00",
                sku_name: "1*30",
              },
              {
                id: "26",
                sku_id_list: "17",
                sku_code: "---",
                sku_goods_number: "10403",
                online_price: "5.00",
                purchase_price: "19.00",
                sku_name: "1*1",
              },
            ],
          },
        },
        {
          id: "56",
          goods_name: "康师傅冰红茶1L",
          goods_code: "---",
          goods_number: "111003",
          attribute_state: "2",
          online_price: "4.00",
          purchase_price: "2.75",
          skus: {
            status: 1,
            count: 2,
            data: [
              {
                id: "25",
                sku_id_list: "15",
                sku_code: "---",
                sku_goods_number: "1000123-2",
                online_price: "48.00",
                purchase_price: "33.00",
                sku_name: "箱",
              },
              {
                id: "24",
                sku_id_list: "16",
                sku_code: "---",
                sku_goods_number: "1000123-1",
                online_price: "4.00",
                purchase_price: "2.75",
                sku_name: "瓶",
              },
            ],
          },
        },
        {
          id: "55",
          goods_name: "双汇清伊坊清真鸡肉香肠140g（1*18）",
          goods_code: "---",
          goods_number: "111002",
          attribute_state: "2",
          online_price: "10.00",
          purchase_price: null,
          skus: {
            status: 1,
            count: 2,
            data: [
              {
                id: "23",
                sku_id_list: "15",
                sku_code: "---",
                sku_goods_number: "100004-2",
                online_price: "50.00",
                purchase_price: "25.00",
                sku_name: "箱",
              },
              {
                id: "22",
                sku_id_list: "14",
                sku_code: "---",
                sku_goods_number: "100004-1",
                online_price: "5.00",
                purchase_price: "2.50",
                sku_name: "袋",
              },
            ],
          },
        },
        {
          id: "54",
          goods_name: "双汇清伊坊清真鸡肉香肠140g（1*18）",
          goods_code: "---",
          goods_number: "111002",
          attribute_state: "2",
          online_price: "5.00",
          purchase_price: null,
          skus: { status: 1, count: 0, data: [] },
        },
        {
          id: "53",
          goods_name: "青岛啤酒",
          goods_code: "---",
          goods_number: "10231231",
          attribute_state: "2",
          online_price: null,
          purchase_price: "8.00",
          skus: {
            status: 1,
            count: 2,
            data: [
              {
                id: "19",
                sku_id_list: "11",
                sku_code: "123165436",
                sku_goods_number: "10231231-3",
                online_price: null,
                purchase_price: "96.00",
                sku_name: "12瓶(箱)",
              },
              {
                id: "18",
                sku_id_list: "10",
                sku_code: "123165435",
                sku_goods_number: "10231231-1",
                online_price: null,
                purchase_price: "8.00",
                sku_name: "瓶",
              },
            ],
          },
        },
        {
          id: "2",
          goods_name: "康师傅牛肉泡面",
          goods_code: "620012385582",
          goods_number: "1002",
          attribute_state: "2",
          online_price: "5.50",
          purchase_price: "2.50",
          skus: {
            status: 1,
            count: 5,
            data: [
              {
                id: "17",
                sku_id_list: "9",
                sku_code: "620012385582-21",
                sku_goods_number: "1002-12",
                online_price: "38.00",
                purchase_price: "24.00",
                sku_name: "红烧*10(箱)",
              },
              {
                id: "16",
                sku_id_list: "8",
                sku_code: "620012385582-11",
                sku_goods_number: "1002-7",
                online_price: "38.00",
                purchase_price: "24.00",
                sku_name: "麻辣(箱)",
              },
              {
                id: "3",
                sku_id_list: "3",
                sku_code: "620012385582-3",
                sku_goods_number: "100001-3",
                online_price: "5.00",
                purchase_price: "2.50",
                sku_name: "酸辣",
              },
              {
                id: "2",
                sku_id_list: "2",
                sku_code: "620012385582-2",
                sku_goods_number: "100001-2",
                online_price: "5.00",
                purchase_price: "2.50",
                sku_name: "红烧",
              },
              {
                id: "1",
                sku_id_list: "1",
                sku_code: "620012385582-1",
                sku_goods_number: "100001-1",
                online_price: "5.00",
                purchase_price: "2.50",
                sku_name: "麻辣",
              },
            ],
          },
        },
        {
          id: "1",
          goods_name: "商品1",
          goods_code: "4249399385",
          goods_number: "39341",
          attribute_state: "1",
          online_price: null,
          purchase_price: "10.00",
          skus: "",
        },
      ],
      newTableData: [],
      rowspan: [],
    };
  },
  created() {
    let newTableData = [];
    let rowspan = []; //存放数组每行的 合并row 数据
    this.tableData.map((item, index) => {
      if (item.skus.data && item.skus.data.length > 0) {
        item.skus.data.map((i, j) => {
          if (j === 0) {
            rowspan.push(item.skus.data.length);
          } else {
            rowspan.push(0);
          }
          newTableData.push({ ...item, sku: i });
        });
      } else {
        newTableData.push(item);
        rowspan.push(1); //无规格商品
      }
    });
    this.newTableData = newTableData;
    this.rowspan = rowspan;
    console.log(this.newTableData);
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row, //合并的行数
          colspan: _col, //合并的列数，设为0则直接不显示
        };
      }
    },
    handleSelectChange(selection, row) {
      //   this.multipleSelection = selection;
      console.log(selection); // [{...}, {...}]
    //   console.log(row); // [{...}, {...}]
    },
    handleSelectAll(selection) {
      //   console.log(this.multipleSelection);
      console.log(selection); // [{...}, {...}]
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>

```陪伴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element 合并表格头部
06-05
本篇文章将深入探讨如何在Element UI中利用表格（Table）组件实现仅合并头部单元格的功能，这对于创建复杂的表格布局至关重要。 首先，我们需要了解Element UI的Table组件的基本用法。Table组件允许我们展示数据集...
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ...
element 表格动态生成列和动态合并行
qq_36942042的博客
07-27 1174
element 表格动态生成列和动态合并行 <template> <div class="color-333 font14 bg-fff m-t-10"> <div class="flex_1 m-b-30 m-r-30"> <div class="flex_end p-v-10"> <el-checkbox-group v-model="checkColumnIndexArr"
elementui组件table表，同时合并列和行的问题
aofensuo8016的博客
08-15 1110
项目需要实现每三行合并两行，然后每三行合并三列，下图这种效果： 代码： <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column ...
element 表格合并
weixin_47752439的博客
04-17 103
在这里插入代码片 <template> <div> <button @click="change"> @</button> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-colum
element合并表格？
Dark_programmer的博客
08-19 484
刚听到这个需求，感觉简直不要太简单。虽然没有搞过这样的需求，但是element的table自带合并不是么。然后自以为是的我被现实狠狠的打了一巴掌 官方API 【element table】 如果官方文档能够解决我的问题，就不会有以下问题了。不过还是建议有必要尝试一下官方Demo 接收需求 ...
Vue+Elementui实现多个表格table合并
hikktn的博客
06-23 2534
技术关键点 slot="append" 这条代码用于卡槽，在表格末尾处添加你想要的样式 :show-header="false" 这条代码是用来忽略表格头 完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://unpkg.com/vue..
Element 表格合并行后处理checkbox全选问题
wzuof的博客
12-04 3798
问题场景：当表格合并行后，先勾选全选，这个时候数据获取数目没有问题，当用户手动把选框一个个全都去除勾选，这个时候获取的数据应该是空，但是这个时候 获取的数据不是空。 当表格合并行后，勾选如图所示的全选按钮，控制台是获取到了5条数据 当用户手动把勾选去除，全选按钮的状态是还有勾选数据，这个时候控制台打印出来的数据是3条，此时对于用户来讲应该是一条都没有勾选才对，所以这个时候需要通过逻辑代码来处理下 //根据数组对象的某个字段去重 unique(arr, val) { const res = new M
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
vue+element实现sku表格
02-12
`el-table`支持多级表头、行合并、自定义列模板等功能，非常适合构建复杂的数据展示表格。 实现SKU表格的关键步骤如下： 1. **安装依赖**：首先确保已经安装了Node.js环境，然后通过`npm`或`yarn`安装Vue.js、...
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element 表格合并单元格之后数据选择问题
猿叔的博客
08-22 2122
element 合并单元格之后数据选择问题
Vue + element-ui合并单元格后，checkbox多选单选取值问题
qq_41643208的博客
08-01 790
Vue + element-ui合并单元格后，checkbox多选单选取值问题
详解element-ui表格的合并行和列(非常细节)
小墨鱼的前端问题录
12-16 6325
但是此时又有个问题了，如果将 1 ，2行合并，那么应该同时有两个ID值在同一行内、但是我们希望只有一个才行、因此需要用到 第二个 if 中的 else 中内容，即 0，0。​ 一起理解，第二个 if 的作用是：当行号为 0，2 时，即除以 2 的余数为 0。​ （2，1）：表示将自身以及下一行合并，即合并 2 行、将自身的列合并（如果值是 2 那么就是将自身和右边的一起合并）有时候开发中、我每一次需要合并的行数是不一定相同的、第一个需要合并3行，第二个需要合并6行甚至更多，那怎么办？
vue3使用elementPlus进行table合并处理
最新发布
技术不够，加班来凑
02-26 643
虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示。const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到。elementPlus中table合并部分列。
vue+elementUi实现表格内容的合并（复杂度的三级）
前端-尔嵘
11-30 3224
方法一、 效果： 源码： <template> <el-card shadow="never" class="aui-card--fill"> <el-table :data="tableData" ref="tableData" border :span-method="objectJBXXMethod"> <el-table-column prop="gwsn" label="网关" min-width
vue问题：multi-word
zxl0825的博客
02-02 190
vue命名有属于自己的规则，如果想子集随便命名需要在第一行加上<!-- eslint-disable vue/multi-word-component-names --> 就可以·取消命名规则。
elementUI中table单元格的合并，通用版
weixin_46103180的博客
09-21 5661
elementUI中table单元格的合并，通用版
vue/multi-word-component-names报错处理
热门推荐
hanq2016的博客
03-21 1万+
vue/multi-word-component-names是用于检测当前的组件名称是否使用驼峰或多单词命名，eslint默认是要求检测，可以手动关闭检测 修改.eslintrc.js文件的规则如下： module.exports = { root: true, env: { node: true, }, extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended.
element 表格上下合并且分页
04-28
element 表格上下合并且分页是一种常见的需求，特别是在处理大量数据时。上下合并的操作可以使表格更加紧凑，而分页则可以让用户更加方便地浏览数据。 要实现 element 表格上下合并且分页，首先需要在表格头部设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值