精华内容
下载资源
问答
  • table合并单元格
    2022-04-11 15:05:57
    handleSpan({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0) {
        return {
          rowspan: row.mergeCol === 0 ? 0:row.mergeCol,
          colspan: row.mergeCol === 0 ? 0:1
        };
      }
    },
    //name 是你想要合并的字段名称
    integratedData(data) {
      let arrId = [];
      data.forEach(i => {
        !arrId.includes(i.name) ? arrId.push(i.name) : arrId;
      });
      console.log(arrId)
      let arrObj = [];
      arrId.forEach(j => {
        arrObj.push({
          month: j,
          num: 0
        })
      })
      // 计算每个数据的可跨行数
      data.forEach(k => {
        arrObj.forEach(l => {
          k.name === l.month ? l.num ++ : l.num;
        })
      })
      data.forEach((m,mIndex) => {
        arrObj.forEach((n,index) => {
          if(m.name === n.month){
            if(arrId.includes(m.name)){
              m.mergeCol = n.num;
              arrId.splice(arrId.indexOf(m.name),1);
            }else{
              m.mergeCol = 0;
            }
          }
        })
      })
      console.log(arrId);
      this.table_data= data;
    },
    

    更多相关内容
  • layui table合并单元格.zip 跨行自动合并单元格
  • 各种合并单元格的方法,本文提供了六种合并的方法,大家可以按需选择试用自己的方法!
  • 主要为大家详细介绍了bootstrap table实现合并单元格效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • table合并单元格

    千次阅读 2021-08-11 10:50:20
    el-table :data="tableDataNew" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> <...

     

    遇到这种设计,记录一下

    <el-table
          :data="tableDataNew"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1(元)">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2(元)">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="address"
            label="产地">
          </el-table-column>
        </el-table>
    <script>
      export default {
        data() {
          return {
            tableDataNew:[],
            tableData: [{
              id: '12987122',
              name: '王小虎1',
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }, {
              id: '12987124',
              name: '王小虎2',
              amount1: '324',
              amount2: '1.9',
              amount3: 9,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }
              ]
            }, {
              id: '12987125',
              name: '王小虎3',
              amount1: '621',
              amount2: '2.2',
              amount3: 17,
             children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }, {
              id: '12987126',
              name: '王小虎4',
              amount1: '539',
              amount2: '4.1',
              amount3: 15,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }]
          };
        },
        mounted() {
          this.dataFilter()
        },
        methods: {
          dataFilter() {
              // 主要是数据符合table的要求,用foreach for 循环都可,两层循环,把数组扁平化,提供一个思路
            this.tableDataNew =[]
            console.log('thisdate',this.tableData)
            for (let j=0; j<this.tableData.length; j++) {
              console.log('this.tableData.length',this.tableData.length)
                 console.log('this.tableData[j].children.length',this.tableData[j].children)
              if(this.tableData[j].children === undefined || this.tableData[j].children === 'undefined') {
                 this.tableDataNew.push({...{
                      id: this.tableData[j].id,
                      name:  this.tableData[j].name,
                      amount1: this.tableData[j].amount1,
                      amount2: this.tableData[j].amount2,
                      }})
               console.log('结果',this.tableDataNew)
              } else {
                for (let i = 0;i < this.tableData[j].children.length; i++) {
                  console.log('this.tableData[j].children.length',this.tableData[j].children.length)
                    this.tableDataNew = this.tableDataNew.concat({...this.tableData[j].children[i],...{
                      id: this.tableData[j].id,
                      name:  this.tableData[j].name,
                      amount1: this.tableData[j].amount1,
                      amount2: this.tableData[j].amount2,
                      length: this.tableData[j].children.length,
                      istarget: i ===0 || i === this.tableData[j].children.length+1? true :false // 记录合并单元格位置
                    }})
                }
             }
            }
             console.log('新数据', this.tableDataNew)
          },
          // 合并单元格
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
              if (columnIndex < 4) {
                  if(row.istarget) {
                    return {
                      rowspan: row.length,
                      colspan: 1
                    };
                  } else {
                    return {
                      rowspan: 0,
                      colspan: 0
                   };
              }
            }
            console.log('row.istarget', row.istarget )
          }
        }
      };
    </script>

    展开全文
  • vue-easytable合并单元格

    2018-05-18 17:55:36
    vue-easytable合并单元格,文档包括ftl文件及对应的js
  • el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
  • el-table合并单元格

    千次阅读 2022-04-14 13:57:54
    el-table合并单元格 原效果: 这样看起来就很难受,用户体验极其不好,所以,我们把相同的单元格进行合并。 直接上代码 <el-table v-loading="loading" :data="AstationFxList" :stripe="true" :span-method=...

    el-table合并单元格

    原效果:
    在这里插入图片描述

    这样看起来就很难受,用户体验极其不好,所以,我们把相同的单元格进行合并。

    直接上代码

    <el-table v-loading="loading" :data="AstationFxList"
                      :stripe="true"
                      :span-method="objectSpanMethod" //加入这个方法
    </el-table>
    

    在你查询出来所有数据的方法中

    getList() {
          this.loading = true;
          listAstationFx(this.queryParams).then(response => {
            this.AstationFxList = response.rows;
            this.getSpanArr(this.AstationFxList); //把数据添加到这个方法中
            this.total = response.total;
            this.loading = false;
          });
        },
    

    编写此 getSpanArr()方法

    //获取合并配置明细
        getSpanArr(data) {
          // data就是我们从后台拿到的数据
          this.spanArr = [];
          this.pos = 0;
          
          this.spanArrdfytsl = [];//合并电费用途统计数量
          this.posdfytsl = 0;//合并电费用途统计数量索引
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              //设置table表格行号、设置合并参数,以便相同参数合并
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].city === data[i - 1].city) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              }else{
                this.spanArr.push(1);
                this.pos = i;
              }
    			if (data[i].name=== data[i - 1].name) {
    	            this.spanArr[this.pos] += 1;
    	            this.spanArr.push(0);
              	}else{
    	            this.spanArr.push(1);
    	            this.pos = i;
              }
              //如果我们合并的是多列,那么就继续if()else,但是要将数据添加的数组要重新声明。
              if (data[i].sumdfyfv === data[i - 1].sumdfyfv) {
                this.spanArrdfytsl[this.posdfytsl] += 1;
                this.spanArrdfytsl.push(0);
              }else{
                this.spanArrdfytsl.push(1);
                this.posdfytsl = i;
              }
            }
          }
        },
    

    最后合并

    //合并单元格
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
          if(columnIndex ===0 ){
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {rowspan: _row,colspan: _col}
          }
          if(columnIndex === 1){
            const _row = this.spanArrdfytsl[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {rowspan: _row,colspan: _col}
          }
        },
    

    最后效果图
    在这里插入图片描述

    此文章是为了记录遇到的问题,方便以后的查看。

    展开全文
  • element-ui Table如何合并单元格

    element-ui Table如何合并单元格

    我这里的需求是在懒加载的数据中从 管理员 开始的3列合并, 跟进任务量 开始的3列合并
    在这里插入图片描述

    合并单元格其实是占位,所以清除单元格一定要做

    row 为行数据,column 为列数据,rowIndex 为行索引,columnIndex 为列索引

    	<el-table :span-method="arraySpanMethod"></el-table>
    
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          // row为行数据,column为列数据,rowIndex 为行索引,columnIndex 为列索引
          // console.log(row, column, rowIndex, columnIndex);
          let addArr = ["管理员", "跟进任务量"];
          let delArr = [
            "总服务用户量",
            "当前在学服务人数",
            "任务处理量",
            "任务处理量",
          ];
          // 判断该行是否有子级独有id
          if (row.teachingAffairsProjectId) {
          	// label匹配则开始合并
            if (addArr.includes(column.label)) {
              return {
                // 占位(合并单元格)
                rowspan: 1, // 行
                colspan: 3, // 列
              };
            } else if (delArr.includes(column.label)) {
              return [0, 0]; // 清除单元格(一定要做)
            }
          }
        },
    
    展开全文
  • 主要介绍了JS实现动态修改table合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
  • elementUI合并单元格
  • vue原生table合并单元格 <table border="1"> <thead> <tr> <th>学习</th> <th>名称</th> <th>班级</th> <th>年级</th> </tr> &l
  • Vue中table合并单元格用法

    千次阅读 2020-12-21 13:29:56
    地名 结果 人名 性别 {{item.name}} 已完成 未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son].name}} {{item.groups[son].sex}} vue原生table合并单元格并可编辑 table中tr间距的设定...
  • antd-vue之table合并单元格

    千次阅读 2022-04-01 13:55:06
    <template>...a-table :columns="columns" :data-source="data" bordered></a-table> </template> <script> const renderContent = (value) => { const obj = { children...
  • Layui table合并单元格

    2021-05-31 14:56:19
    table.render({ ... ... ... done: function (res, curr, count) { var columsName = ["De_Name", "型号", "品牌", "封装"]; var columsIndex = [1, 2, 3, 4]; var elem = "div[lay-id='dataTable_Client'] "; ...
  • tableData是全部的订单,里面每一条[ ]代表一条订单,每一条里都包含了一个products数组代表订单对应的商品,当商品为多条时,相同的数据就要合并展示 data() { return { tableRowData: [], //用于存放每一行记
  • 问题遇到的现象和发生背景 el-table合并单元格后,点击确认,如何拿到合并后的所有数据,现在默认的只取合并后的第一条数据 问题相关代码,请勿粘贴截图 运行结果及报错内容 我的解答思路和尝试过的方法 我想要达到...
  • a-table :columns="columns" :data-source="data" bordered> <template #name="{ text }"> <a>{{ text }}</a> </template> </a-table> </template> <script> ...
  • ant- design for table合并单元格方法
  • table合并单元格 function uniteTdCells(tableId){ var table = document.getElementById(tableId); for (let i = 0; i < table.rows.length; i++) { for (let c = 0; c < table.rows[i].cells....
  • 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
  • React antd Table 合并单元格

    千次阅读 2020-11-05 14:28:30
    参数说明: 参数一: 全部Data列表数据 参数二:用于相同字段合并的key 参数三:展示的文本值(支持text或reactNode) 参数四:当前行的数据 record 参数五:当前行的索引index 使用: const columns = [ { title: '...
  • 合并单元格,如果id列值一致,则合并 原理 1、getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组; 2、spanArr是一个空的数组,用于存放每一行记录的合并数; 3、 pos是spanArr的索引。 如果是第...
  • iview table 合并单元格

    2021-03-18 11:02:35
    Table :loading="loading" border :columns="columnsDefault" :data="data" :span-method="handleSpan"></Table> // 被整理的数组中相同taskMonth的元素需放在一块 integratedData(data) { let that = ...
  • table 合并单元格内容

    2019-11-21 16:09:57
    最近使用element ui做的一个表格,现在又加了一个新需求,就是要求可以合并单元格. 从后台拿到的数据格式如下: data= [ { "number": 4, "dataTypeName": "食品生产", "dataType": "1", "details": [ { "wscCou...
  • } </style> 合并表格二 实现的效果 如图所示,现在是合并的表头 并且hover的时候,依然会有合并单元格效果 重点代码:的多级嵌套,在哪个下面,就嵌套在那里面 <el-table :data="tableData" style="width: 100%" ...
  • el-table :data="tableData6" :span-method="objectSpanMethod" border> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="...
  • 合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位; 合并第二、三、四列时,需要把第二列和第三列隐藏 if (columnIndex === 1) { return [1, 3]; } else if ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,355
精华内容 16,542
关键字:

table合并单元格