vue3+element-plus表格默认排序default-sort失效问题

场景

在使用动态数据渲染的场景,el-table设置默认属性default-sort失效。

原因

el-table的default-sort属性是针对静态数据的,如果是动态数据,default-sort则无法监听到。

  • 案例:静态数据
javascript 复制代码
<template>
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
]
</script>

默认排序正常

  • 案例:模拟动态数据(setTimeout模拟后端延时数据返回)
javascript 复制代码
<template>
  <el-table
    ref="tableNode"
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
const tableNode = ref()
interface User {
  date: string
  name: string
  address: string
}
let tableData = ref<User[]>([])
setTimeout(function(){
  tableData.value = [
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  }
]
}, 3000)
</script>

默认排序失效

解决方法

等待数据渲染结束后(nextTick回调),采用el-table提供的sort方法实现手动排序

javascript 复制代码
<template>
  <el-table
    ref="tableNode"
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
const tableNode = ref()
interface User {
  date: string
  name: string
  address: string
}
let tableData = ref<User[]>([])
setTimeout(async function(){
  tableData.value = [
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  }
]
await nextTick()
tableNode.value.sort('date', 'descending')
}, 3000)
</script>

默认排序正常

相关推荐
木子020434 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
运维-大白同学1 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ3 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z3 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁3 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜3 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript