Bug Type: Component
Environment
- Vue Version:
3.2.40
- Element Plus Version:
2.2.17
- Browser / OS:
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
- Build Tool:
Vite
Reproduction
Related Component
el-table
Reproduction Link
Element Plus Playground
Steps to reproduce
<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as EpVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
const DATA = [
{
releaseDate: 1640102400000,
landNo: 36
},
// 以下两个 releaseDate 相同,故再根据 landNo 进行对比
{
releaseDate: 1635264000000,
landNo: 33
},
{
releaseDate: 1635264000000,
landNo: 34
},
]
const tableData = ref([...DATA])
// 模拟异步请求数据(3秒后,注意观察表格第一列数据)
setTimeout(() => {
tableData.value = [...DATA]
}, 3000)
</script>
<template>
<el-table
:data="tableData"
:default-sort="{
prop: 'landNo',
order: 'descending'
}">
<el-table-column
prop="landNo"
label="编号"
sortable></el-table-column>
<el-table-column
prop="releaseDate"
label="发布时间"
sortable
:sort-by="['releaseDate', 'landNo']">
</el-table-column>
</el-table>
</template>
What is Expected?
与 ElementUI 的 el-table 表现一致,default-sort 对异步数据有效。
What is actually happening?
default-sort 仅在初始化数据有效(即对异步数据无效),对异步数据,须主动调用 table 的 sort
方法:
// 在异步获取数据的回调函数内
nextTick(() => {
tableRef.value.sort(prop, order)
})
Additional comments
(empty)
6条答案
按热度按时间bkhjykvo1#
default-sort 只会在onMounted 处理逻辑
w8f9ii692#
default-sort 只会在onMounted 处理逻辑
对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)
ndasle7k3#
default-sort 只会在onMounted 处理逻辑
对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)
default开头的props 都是这样处理,这是通行的做法,包括menu 组件的default-active 都是一样的效果
5n0oy7gb4#
default-sort 只会在onMounted 处理逻辑
对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)
就是组件内部怎么找到你的数据是不是异步的呢?默认值可以理解成初始值
insrf1ej5#
@gjfei 我之前表达得不清晰。
这与异步无关,无论是
default-sort
,还是用户主动点击进行排序,后续更改数据,排序规则都没有生效。如果想要保持排序规则,开发者需要做以下 2 步:
这种开发体验是否有提升的空间呢?毕竟表格作为常用组件。
当然,以上是我个人的使用场景,也许实际上对于不需要保持排序规则的场景更多。
案例
hiz5n14c6#
@JChehe I encountered the same problem as you. If the data was loaded asynchronously, the table should be sorted when the data is observed, and then the watcher should be destroyed.
Even if the initial data is processed only at
onMounted
, the sort identifier on the column header should not be updated if the initial data is empty. This phenomenon led me to believe that the data had been sorted, but it hadn't.I agree with your suggestion, but it seems that the maintainers are reluctant to give more thought to this frequently used scenario, and I'm disappointed by that.