view-design
[Bug Report]表格在表头分组情况下排序异常（无法正常排序、多列无法分别排序）
Environment
Windows11/Chrome/vue-cli 5.0.8
Reproduction link
https://run.iviewui.com/cQJt6zVd
Steps to reproduce
为表格的表头设置分组
【无法正常排序】 在第一个表格，点击“年龄”字段的排序按钮，排序结果不对。
【多列无法分别排序】 在第二个表格，点击任意一个字段的排序按钮，不仅排序结果不对，两个可排序字段的排序状态会被同步
What is expected?
选中的字段能正常排序，且不应该影响其他可排序字段的排序情况
What is actually happening?
选中的字段不能正常排序，其他可排序字段的排序情况会被一起同步
@GodExious 你好！我是Dosu，一个能够帮助你解决 bug、回答问题并帮助你成为贡献者的机器人。我会在等待人类维护者的过程中为你提供帮助。
表格在表头分组情况下排序异常，且多列无法分别排序的原因是 TableColumnConfig 中的 children 属性。当使用 children 属性对表头进行分组时，排序功能可能无法正确隔离每个列的排序状态，导致多个列的排序状态被同步。
以下是 TableColumnConfig 中的相关部分：
/**
* 表头分组
*/
children?: any[];
例如，在 ViewUIPlus 库中，表格配置可能如下所示：
columns: [
{
title: 'Name',
key: 'name',
children: [
{
title: 'First Name',
key: 'firstName',
sortable: true
},
{
title: 'Last Name',
key: 'lastName',
sortable: true
}
]
},
{
title: 'Age',
key: 'age',
sortable: true
}
]
在这个配置中，children 属性将 First Name 和 Last Name 列分组在 Name 表头下。如果排序逻辑没有正确隔离，排序其中一个列可能会影响其他列的排序状态[1][2].
目前，ViewUIPlus 仓库中没有提供关于 children 属性使用的额外限制或问题的详细信息[1].
To continue talking to Dosu, mention @dosu.
![dosubot[bot] avatar](https://avatars.githubusercontent.com/in/324583?v=4 "Published by a pub.dev verified publisher"){kind=small}
要在表头分组的情况下正确排序并保持 "Age" 列在分组表头中，你需要确保 "Age" 列在分组表头中正确定义，并且排序功能正确实现。
以下是一个示例，展示了如何在分组表头中定义 "Age" 列并确保其可排序：
<template>
<div style="margin: 200px">
<Divider>表头分组（边框）</Divider>
<Table border :columns="columns11" :data="data10" height="500"></Table>
</div>
</template>
<script>
export default {
data () {
return {
data10: [
{"key":0,"name":"John Brown","age":1,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},
{"key":1,"name":"John Brown","age":2,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},
// ... more data
],
columns11: [
{
title: 'Name',
key: 'name',
align: 'center',
width: 200,
fixed: 'left',
filters: [
{
label: 'Joe',
value: 1
},
{
label: 'John',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name === 'Joe';
} else if (value === 2) {
return row.name === 'John Brown';
}
}
},
{
title: 'Other',
align: 'center',
children: [
{
title: 'Age',
key: 'age',
align: 'center',
width: 200,
sortable: true
},
{
title: 'Address',
align: 'center',
children: [
{
title: 'Street',
key: 'street',
align: 'center',
width: 200
},
{
title: 'Block',
align: 'center',
children: [
{
title: 'Building',
key: 'building',
align: 'center',
width: 200
},
{
title: 'Door',
key: 'door',
align: 'center',
width: 200
}
]
}
]
}
]
}
]
};
}
};
</script>
在这个示例中，"Age" 列被定义在 "Other" 分组表头下，并设置为可排序。这应该有助于解决排序不正确的问题，并确保排序状态正确同步[1].
To continue talking to Dosu, mention @dosu.
@dosu 事实上这还是投机取巧的方法，这个bug更为准确地来说是只有组内第一列的数据可以被正确排序，任何组内的其他可选排序列点击排序时将完全按照第一列的大小作为排序基准，从而无法正确排序，这是个实在的bug
要解决组内只有第一列可以正确排序的问题，你需要确保每个可排序列都有独立的排序逻辑。以下是一个示例，展示了如何为每个可排序列定义独立的排序方法：
<template>
<div style="margin: 200px">
<Divider>表头分组（边框）</Divider>
<Table border :columns="columns11" :data="data10" height="500"></Table>
</div>
</template>
<script>
export default {
data () {
return {
data10: [
{"key":0,"name":"John Brown","age":1,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},
{"key":1,"name":"John Brown","age":2,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},
// ... more data
],
columns11: [
{
title: 'Name',
key: 'name',
align: 'center',
width: 200,
fixed: 'left',
filters: [
{
label: 'Joe',
value: 1
},
{
label: 'John',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name === 'Joe';
} else if (value === 2) {
return row.name === 'John Brown';
}
}
},
{
title: 'Other',
align: 'center',
children: [
{
title: 'Age',
key: 'age',
align: 'center',
width: 200,
sortable: true,
sortMethod (a, b) {
return a.age - b.age;
}
},
{
title: 'Address',
align: 'center',
children: [
{
title: 'Street',
key: 'street',
align: 'center',
width: 200
},
{
title: 'Block',
align: 'center',
children: [
{
title: 'Building',
key: 'building',
align: 'center',
width: 200,
sortable: true,
sortMethod (a, b) {
return a.building.localeCompare(b.building);
}
},
{
title: 'Door No.',
key: 'door',
align: 'center',
width: 200
}
]
}
]
}
]
}
]
};
}
};
</script>
在这个示例中，Age 列和 Building 列都设置了 sortable: true 并且定义了各自的 sortMethod。这样可以确保每个列在分组表头中独立排序，不会依赖于组内第一列的排序逻辑[1][2]。
To continue talking to Dosu, mention @dosu.
生成一个表头可以解决
renderHeader: (h, params) => {
return h("div",
{
style:{
display: 'flex',
alignItems: 'center',
gap: '0px',
}
},
[
h("span",params.column.title),
h("div",
{
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0px',
},
} ,
[
h(resolveComponent("Icon"), {
type: "ios-arrow-up",
onClick: () => {
console.log('正序排序');
},
}),
h(resolveComponent("Icon"), {
type: "ios-arrow-down",
onClick: () => {
console.log('倒序排序');
},
}),
]
)
]);
},
