Vue中动态渲染排序按钮，并传到后端进行排序

最新推荐文章于 2024-01-09 20:25:27 发布
最新推荐文章于 2024-01-09 20:25:27 发布
阅读量2.8k 收藏 2
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43568226/article/details/113481263
版权

数据库中每个列名称有字段名为sortable为ture或者false来控制这个列是否需要排序，给有需要排序的列加上element-ui中的上下箭头按钮，并根据点击的列去传参数到后端，后端进行排序后返回。

1.给table 组件添加自拟函数属性

      <el-table
        :data="data"
        border
        style="width:100%"
        v-loading="loading"
        @select="handleSelect"
        :header-cell-style="headerStyle"
        :cell-
最低0.47元/天 解锁文章
Kennicis
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 排序（上下箭头切换）
Huang_DW的博客
07-21 5428
<template> <div> <!-- 排序 --> <div class="list-sort"> <div>综合</div> <div style="display: flex;align-items: center;"> <div @click="onSort">价格</div> <div> <div :class="{'
Vue点击按钮进行排序
xing942012的博客
12-03 3427
首先先引入vue,js，不然一切操作均无效 先用一个外部div包裹整体，然后写出基本样式，input框可以搜索显示名字，写三个按钮分别绑定点击事件，然后再用一个v-for遍历数组，显示在页面上 <div id="root"> <h2>人员列表</h2> <input type="text" name="" id="" value="" placeholder="搜索" v-model="keyword" /> <button @c
vue3 实现排序按钮
喜大普奔
07-26 725
需要实现一个复用性，是提供表单顺倒排序的按钮。
element Table 表格给列添加排序符号， 并把排序规则传给后台
weixin_40841731的博客
01-29 5419
先看写法：蓝色部分     &lt;el-table         @sort-change="getSortChange"         :default-sort = "{prop: 'start_time', order: 'desc'}"     &gt;       &lt;el-table-column prop="start_time" label="开始时间" sortab...
vue升序降序按钮功能实现
前端小王子
05-19 2024
需求：默认升序，悬浮按钮变色，点击按钮下标跟随变化。 html <div class="right" @click="change(item,index)" v-for="(item, index) in btnList" :key="index">{{item.lable}} <div class="box-icon"> <div class="u
vue 根据数组中某一项的值进行排序的方法
01-19
vue中数组和对象的排序 1数组排序 <li v-for=a>{{a}} [removed] new Vue({ el:#app, data:{ arr:[1,4,5,2,3,44] },computed:{ arr1:function(){ return this.arr.sort(sortNum)//调用排序方法 }...
Vue中对拿到的数据进行A-Z排序的实例
10-17
今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE渲染后端返回含有script标签的html字符串示例
10-16
在现代Web开发中，前端与后端的交互日益频繁，特别是在构建动态富客户端应用时，如使用Vue.js这样的JavaScript框架。Vue.js允许开发者通过它的模板语法来构建用户界面，但有时候，后端可能会返回包含HTML和...
解决vue elementUI中table里数字、字母、中文混合排序问题
01-19
使用elementUI中的table时，给包含数字字母中文的名称等字段排序 例如：数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z） 2.代码解析 tooltip-effect=dark class=xg-table xss=removed max...
vue element table 表格请求后台排序
lilongwei4321的博客
08-08 9644
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 &lt;el-table :data="playerTableData" border style="width: 100%" :default-sort = "{p...
vue表格中按钮实现带参数和后端进行数据交互
胖达不胖的博客
12-23 1681
想实现超链接带参数请求后端进行业务处理？ 传统jsp代码：使用超链接请求后端 <a href="delete?no=${stu.stuNo}">删除</a> Vue式：把参数传递到函数中，在函数中通过ajax或者axios请求后端 表现层： <tr v-for="stu in studentList"> <td>{{stu.id}}</td> <button @click="deleteStu(stu.id)">删除</bu
Vue开发实战九：列表字段动态展示及全数据排序
博主逸尘
08-10 1504
文章目录1. 先用u-table做一个列表2.向列表中加入列3.列字段全数据排序4.看下数据请求字段 项目框架用的vue+elementUI，列表中展示的字段有的是固定字段、有的是从接口中取的数组，还有的是设置的每个用户能够动态展示及隐藏的字段，要求实现字段动态及全数据排序。 1. 先用u-table做一个列表 <u-table v-loading="dataListLoading" :data="dataList" ref="multipl
vue 时间日期的升降序
weixin_41262185的博客
10-08 1927
话不多说直接上图 第一步：表头字段加升降序图标 <thead> <tr> <th> <div> <span>预警时间 <i class="fa fa-angle-down" v-show="isShowA==false" @click="ShowA"></i&g...
若依项目的table列表中对每一个字段增加排序按钮（单体版和前后端分离版）
最新发布
weixin_45390688的博客
01-09 1336
ruoyi若依项目列表字段单个排序
vue项目封装排序组件
weixin_43734732的博客
11-07 1028
vue项目上下箭头排序
Vue3+typescript完成一个动画列表排序
琼楼玉宇
03-24 1460
本案例会一部一步的完成 vue3+typescript 的代码。首先看下需求： 界面图中： 点击排序按钮，下面的List会重新排序。 步骤1、先创建一个新的项目。 npm create vite@latest vue-typescript -- --template vue-ts cd vue-typescript && npm i && npm run dev,出现下面画面，说明搭建成功了。 修改app.vue <templa...
Vue/Vue案列(计数器 、排他思想)
m0_64494670的博客
10-20 306
Vue/Vue案列(计数器 、排他思想)
element ui指定列表头添加多页排序功能
qq_36667220的博客
08-17 360
排序字段
vue + element table 组件 实现 动态展示表格列 + 实现拖拽 + 实现排序
记录常见的问题以及解决办法
06-25 4076
效果图： 实现效果：点击选择显示列，通过是否勾选 展示对应的每一列数据是否展示。 代码： <div style="margin: 0; height: calc(100% - 140px)"> <el-table class="znv-table" :data="tableData" border :header-cell-style="rowHeaderClass..
vue点击按钮获取当前时间并传向后端
05-01
在 Vue 中，可以使用 `new Date()` 来获取当前时间。然后，可以将时间作为参数传递给后端接口。假设你使用的是 Axios 来发送请求，可以按照以下步骤进行操作： 1. 在 Vue 组件中定义一个时间变量，用于存储当前时间： ``` data() { return { currentTime: '' } } ``` 2. 在模板中添加一个按钮，并绑定一个点击事件： ``` <button @click="sendTime">获取当前时间</button> ``` 3. 在 `sendTime` 方法中获取当前时间，并发送请求： ``` methods: { sendTime() { const currentTime = new Date() axios.post('/api/saveTime', { time: currentTime }) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }) } } ``` 4. 在后端接口中接收时间参数，并进行处理： ``` app.post('/api/saveTime', (req, res) => { const time = req.body.time // 处理时间 }) ``` 注意，上述代码中的 `/api/saveTime` 是一个示例接口地址，你需要将它替换为你自己的后端接口地址。另外，还需要在组件中引入 Axios，例如： ``` import axios from 'axios' ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值