element-plus [Component] [table] el-table sorting has no effect on subsequent data changes. el-table 排序规则对后续数据更改不起作用。

tsm1rwdh  于 2023-03-19  发布在  其他
关注(0)|答案(6)|浏览(380)

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

  • el-table

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)

bkhjykvo

bkhjykvo1#

default-sort 只会在onMounted 处理逻辑

w8f9ii69

w8f9ii692#

default-sort 只会在onMounted 处理逻辑

对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)

ndasle7k

ndasle7k3#

default-sort 只会在onMounted 处理逻辑

对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)

default开头的props 都是这样处理,这是通行的做法,包括menu 组件的default-active 都是一样的效果

5n0oy7gb

5n0oy7gb4#

default-sort 只会在onMounted 处理逻辑

对于异步数据,表现层是否应该同步?(即蓝色箭头应该自动消失?毕竟数据未排序。)

就是组件内部怎么找到你的数据是不是异步的呢?默认值可以理解成初始值

insrf1ej

insrf1ej5#

@gjfei 我之前表达得不清晰。

这与异步无关,无论是 default-sort ,还是用户主动点击进行排序,后续更改数据,排序规则都没有生效。
如果想要保持排序规则,开发者需要做以下 2 步:

  1. 获取当前排序信息。
  2. 更改数据后,手动设置排序信息。

这种开发体验是否有提升的空间呢?毕竟表格作为常用组件。

当然,以上是我个人的使用场景,也许实际上对于不需要保持排序规则的场景更多。

案例

hiz5n14c

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.

相关问题