Vue3 + TS 实现table锚点定位

最新推荐文章于 2024-06-13 13:22:01 发布
最新推荐文章于 2024-06-13 13:22:01 发布
阅读量1.3k 收藏 5
点赞数 2
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014260592/article/details/122583755
版权 
const mainData = reactive<any>({
   
curKey: ''
})
//用for循环对表格Data数据判断得出表格锚点index赋值给curKey后，
//用element-plus里table的属性方法row-class-name给锚点行加上class
const tableRowClassName &
最低0.47元/天 解锁文章
未命名的猿
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实现导航tab吸顶 & 点击锚点动画跳转 & 监听滚动
EnidChann的博客
06-16 1759
示例图 页面代码 // 导航tab部分, 利用isFixed实现吸顶 <div class="floor bgW" ref="floorFixed" :class="{'isFixed': isFixed}"> <header v-for="(item,index) in navList" @click="clickToFloor(index)" :class="{'
Vue 3 锚点实现方式
weixin_51204324的博客
07-07 998
当我们使用 Vue 3 有时候需要做业内锚点跳转，使用传统的 a href 已经不是很推荐了，我们可以尝试采用以下方法来进行替代。
vue2+elementUI tab横向导航栏吸顶且点击tab锚点定位以及监听滚动条滚动,对应的tab高亮
最新发布
weixin_43305450的博客
06-13 153
vue2+elementUI tab横向导航栏吸顶且点击tab锚点定位以及监听滚动条滚动,对应的tab高亮
vue实现滚动锚点定位
爱兰河少
11-12 2363
效果如图： 注意：gd-tabs标签为内部框架组件，使用时替换为自己框架即可 <template> <div class="custom-demo-view" style="padding: 1rem;"> <div> <gd-tabs v-if="reload" @tabclick="jump" v-mode...
vue3页面点击按钮滚动条置顶、tabs滚动监听亮显、点击锚点跳转整合
qq_29715077的博客
08-02 1741
hooks文件夹>useBackTop.js。hooks文件夹>useBackTop.js。
Vue 3项目中结合Element Plus的＜el-menu＞和CSS3创建锚点，以实现点击菜单项时平滑滚动到对应的锚点目标
m0_67624022的博客
03-22 1453
确保已经安装了Element Plus库。可以使用npm或者yarn进行安装，具体步骤与上文提到的相同。方法来处理菜单项的选择事件，使得点击菜单项时能够平滑滚动到对应的锚点目标。在你的Vue 3项目中引入所需的Element Plus组件和样式。值对应，这样点击菜单项时页面就会平滑滚动到相应的锚点目标位置。属性为对应的锚点目标的id。在页面中添加与菜单项。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
本文将深入探讨如何利用Vue3和ts实现一个具备drag/draggable功能的拖拽任务看板（Taskboard），同时提及与之相关的Gantt图表和JSON编辑器。 首先，Vue3引入了Composition API，它极大地提高了代码的可重用性和可...
vue3+ts入门（todolist案例）
02-10
这可以通过 Vue3 的响应式系统 `reactive` 或 `ref` 来实现。 - **组件结构**：Todolist 可能包括 `TodoList` 主组件和 `TodoItem` 子组件。主组件负责整体状态管理，子组件处理单个待办事项的交互。 - **模板编写...
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。...本文就是利用composition API，将可复用的逻辑抽离到composition API中，并引入ts，实现一个简单的管理后台功能。 利用@vue/cli创建项目 首先需要将 @v
vue3+ts+echarts实现echarts封装
08-01
本文将详细介绍如何在Vue3项目中结合TypeScript和ECharts进行高级封装，以实现更便捷、高效的图表使用。 首先，我们需要安装相关依赖。在Vue3项目中，通常使用npm或yarn进行包管理。运行以下命令来安装Vue3、...
【vue3】自动定位到某个位置的锚点
清凌的博客
06-28 2422
参考文章： 当用户滑动页面时将跟随页面移动的导航栏固定在页面上方 鼠标滑动页面，锚点定位 vue/js - 实现页面自动往上滑动效果 vue项目中获取div高度并默认滚动到底部 vue中实现回到顶部功能 vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动 ...
vue中 tab锚点联动
qq_43437334的博客
04-09 200
vue中 tab锚点联动 代码。
vue 点击tabs平滑滚动(锚点事件)
辞忧*的博客
04-19 1212
避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。 定义 scrollTo(xpos,ypos),包含两个必须属性 xpos（指定滚动到X轴指定位置） ypos（指定滚动到X轴指定位置） 使用： // 滚动到指定位置 window.scrollTo(100,500) scrollTo(options)，包含三个必须属性 top (y-coord) 相当于y轴指定位置 left (x-coord) 相当.
vue实现锚点定位（多级动态菜单）
wozhenhaokan的博客
06-08 815
vue锚点定位，实现多级动态菜单点击跳转到相应位置
el-table锚点定位
Yeoloh的博客
06-05 511
el-table添加锚点滚动到指定位置
vue锚点定位案例
qq_49732089的博客
05-18 475
<!--健康记录--> <template> <div id="healthRecord"> <hc-tabs tab-position="left" v-model="tabActive" @tab-click="tabHandleClick" style="height:200px;width:90px;"> <el-tab-pane label="体重" name="weight"> </el-tab-pane> .
vue锚点定位（tab切换定位不同的div位置）
weixin_39921970的博客
08-11 2005
vue锚点定位（tab切换定位不同的div位置）
vue 锚点定位 tab切换
kola的博客
07-20 4135
废话不说 下面直接上代码和说明 我们这想要实现tab切换时候页面自动滚动定位到锚点位置，因为这个是单页面引用，也没有使用a标签等，使用的是最普通的方法，仅供大家参考。 //要实现切换的三个tab项 <div class="con_nav"> <span @click="changeTab(0)" :class="active === 0 ? 'active' : ''">介绍</span> <span @click="changeTab
vue3+ts后台table表格删除
05-01
如果您想使用Vue3和TypeScript来删除后台表格中的数据，可以使用以下步骤： 1. 在Vue3组件中定义table表格的数据结构和获取方式。 2. 在组件中定义一个方法来处理删除操作，理想情况下应该是在后台进行处理。 3. 在方法中使用axios库发送请求来删除所选行的数据。 4. 在Vue3中使用watchEffect函数来监听表格数据的变化，并实时更新数据。 5. 最后，您可以将删除操作绑定到table表格中的一列上，并在单击时触发该方法。 以下是一个示例代码： ```typescript <template> <table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Delete</th> </tr> </thead> <tbody> <tr v-for="item in items" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td> <button @click="deleteItem(item.id)">Delete</button> </td> </tr> </tbody> </table> </template> <script> import { reactive, watchEffect } from 'vue'; import axios from 'axios'; export default { setup() { // 定义表格数据结构 const items = reactive([ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, ]); // 删除操作方法 const deleteItem = async (id: number) => { const response = await axios.delete(`/items/${id}`); if (response.status === 200) { items.value = items.value.filter((item) => item.id !== id); } }; // 监听表格数据变化并更新 watchEffect(() => { console.log('Items updated:', items); }); // 返回视图数据 return { items, deleteItem, }; }, }; </script> ``` 在此示例中，我们使用reactive函数创建可响应的表格数据items，并在deleteItem方法中使用axios库发送删除数据请求。在请求成功后，我们使用filter方法更新表格数据中的值。最后，使用watchEffect函数监听items的变化并在控制台上进行打印。在模板中，我们将deleteItem方法绑定到“删除”按钮上，以便在单击按钮时调用它。 请注意，此示例代码仅供参考。具体实现取决于您的后端API和表格组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值