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

1 篇文章 0 订阅
1 篇文章 0 订阅

场景

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

原因

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

  • 案例:静态数据
<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模拟后端延时数据返回)
<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方法实现手动排序在这里插入图片描述

<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>

默认排序正常
在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是使用Vue 3.0+Element-Plus开发后台管理系统的步骤: 1.首先,确保你已经安装了Node.js和npm包管理器。 2.使用以下命令安装Vue CLI 4: ```shell npm install -g @vue/cli ``` 3.使用Vue CLI创建一个新项目: ```shell vue create my-project ``` 4.在创建项目时,选择使用Vue 3.0版本,并启用class-style component语法: ```shell ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter, Unit ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: ESLint with error prevention only ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ``` 5.安装Element-Plus和Echarts 5.0: ```shell npm install element-plus echarts@5.0 ``` 6.在main.js中引入Element-Plus和Echarts: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import echarts from 'echarts' const app = createApp(App) app.use(store) app.use(router) app.use(ElementPlus) app.config.globalProperties.$echarts = echarts app.mount('#app') ``` 7.现在你可以开始使用Element-Plus和Echarts来开发你的后台管理系统了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼性书生

谢谢鼓励!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值