xiaoyang880803
2019-03-11 10:43VUE 使用easyui中treegrid使用多行表头,表头与数据内容错位?
5使用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条回答
为你推荐
- vue3 无法更改data中数据的值
- html5
- vue.js
- javascript
- 1个回答
- 生产中的Vue路由器(与Go一起使用)
- vue-router
- vue.js
- 1个回答
- Vue 主入口 main.js文件中 引入了dgram模块为空?
- vue.js
- typescript
- node.js
- 2个回答
- vue使用v-for循环直接使用方法获得的数组问题
- html5
- vue.js
- 3个回答
- vue弹出的模态框中的表单还存在上次的数据怎么办?
- javascript
- node.js
- json
- ajax
- vue.js
- 4个回答
换一换