xiaoyang880803 2019-03-11 10:43
浏览 1211
已结题

VUE 使用easyui中treegrid使用多行表头,表头与数据内容错位?

使用easyui VUE版本的TreeGrid显示多层表头时,如果在一个,双行的列之后加一个跨行的列,会出现数据错位的情况。如下图所示:

图片说明

但是如果把跨行的列放在前面,数据显示正常。如下图所示:
图片说明

但是现在项目要求不能更改显示的顺序。

使用easyui提供的demo,修改表头之后也会出现这样的情况。
图片说明

demo代码如下:

<template>
  <div>
    <h2>Column Group</h2>
    <TreeGrid style="height:250px"
              :data="data" idField="id" treeField="region">
      <GridColumnGroup>
        <GridHeaderRow>
          <GridColumn field="region" title="Region" rowspan="2" width="25%"></GridColumn>
          <GridColumn title="2017" colspan="3" align="center"></GridColumn>
          <GridColumn field="f5" title="f5"  rowspan="2"  ></GridColumn>
        </GridHeaderRow>
        <GridHeaderRow>
          <GridColumn field="f1" title="f1" ></GridColumn>
          <GridColumn field="f2" title="f2" ></GridColumn>
          <GridColumn field="f3" title="f3" ></GridColumn>
        </GridHeaderRow>
      </GridColumnGroup>
    </TreeGrid>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: this.getData()
      };
    },
    methods: {
      getData() {
        return [
          {
            id: 1,
            region: 'Wyoming',
            children: [
              {
                id: 11,
                region: 'Albin',
                f1: 'f1',
                f2: 'f2',
                f3: 'f3',
                f5: 'f5'
              }]
          },
          {
            id: 2,
            region: 'Washington',
            children: [
              {
                id: 21,
                region: 'Bellingham',
                f1: 'f1',
                f2: 'f2',
                f3: 'f3',
                f5: 'f5'
              }
            ]
          }
        ]
      }
    }
  }
</script>
  • 写回答

0条回答

    报告相同问题?

    悬赏问题

    • ¥15 求差集那个函数有问题,有无佬可以解决
    • ¥15 【提问】基于Invest的水源涵养
    • ¥20 微信网友居然可以通过vx号找到我绑的手机号
    • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
    • ¥15 解riccati方程组
    • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
    • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名
    • ¥65 汇编语言除法溢出问题