vue.js - 如何使用 Vue.js 重置单击 Beufy 表时发生的排序事件
问题描述
我正在通过 Vue.js 和 Buefy 开发前端。
我正在使用 Buefy 的表格按特定字段上的点击事件进行排序。当然,我的表格默认是按创建顺序排序的。(后端)我想做的是一个临时对齐,可以像现在一样在前端完成。
这已经很完美了。但是,当前的列点击事件不会返回到默认的排序顺序(创建顺序),除非它们被刷新。
我希望你能理解我的话。如果您需要其他代码或解释,请随时告诉我们。
谢谢阅读。
我在等你的帮助。
组件.vue
<b-table :data="movies">
<template slot-scope="props">
<b-table-column centered="true" field="title" label="title" sortable>
<strong>{{props.row.title}}<strong>
</b-table-column>
<b-table-column centered="true" field="content" label="content" sortable>
<strong>{{props.row.content}}<strong>
</b-table-column>
<template>
</b-table>
解决方案
使用 Vue,您可以创建一个按钮来重新加载表格(解释如下)。
<button @click="resetSortKey = new Date().toLocaleString()">
Clear sorting
</button>
<b-table
:key="resetSortKey"
<!-- ... -->
</btable>
并且不要忘记resetSortKey
在您的数据中进行初始化。
data() {
return {
resetSortKey = 0,
// All your other stuff.
}
}
解释
resetSortKey
每当按下按钮时,我们都会使用唯一值(日期/时间)更新 的值。我们在表上设置键,以便在值
resetSortKey
更改时重新加载。每当表重新加载时,它将清除排序并将顺序恢复为默认值。
推荐阅读
- mysql - 需要帮助将带有自连接的 MySQL 查询转换为 SQLAlchemy
- javascript - 如何以角度显示漂亮的html
- r - 熔化具有多个同名“id.vars”的数据框
- node.js - 如何检查用户是否使用 node.js 和 mongoose 登录
- c# - 我可以将 Newtonsoft.Json 与 CosmosDb v3 一起使用吗?
- python - 过滤多对多关系
- python - sklearn.preprocessing.OneHotEncoder:使用 drop 和 handle_unknown='ignore'
- oracle - Oracle Apex 19. 如何从 3 个表格创建带有交互式报告的表单?
- css - React with SASS 正在删除 CSS 页面大小参数
- c - 如何在这个递归函数中返回列表的头部?