<script setup lang="ts"> import { Empty } from 'ant-design-vue'; export interface TBColumn { title: string dataIndex: string // key: string ellipsis?:
# 使用 Vue 3 和 TypeScript 实现双击表格行事件
在现代前端开发中，表格组件是不可或缺的一部分。它们不仅能很好地展示数据，还能提供丰富的交互体验。在本篇文章中，我们将以 Vue 3 和 TypeScript 为基础，展示如何在表格中实现双击事件。同时，我们还将在最后展示一个简单的饼状图作为数据展示的补充。
## 环境准备
在开始之前，请确保你已安装 Node.js 和 Vu
原创
2024-09-28 06:13:35
135阅读
今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这样简单。那
SpreadJS v14 新版在线表格编辑器可以放便的集成到Vue等框架，只需要一个组件或者几行代码就能在现有工程中集成在线Excel的功能。如果项目不做任何配置集成设计器组件，会让框架大的发布包增大，导致页面首屏加载变慢。下面以Vue 2为例介绍如何进行设计器加载优化。点击获取SpreadJS工具下载示例环境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9推荐
最近在做一个后台项目，里面用到了大量的表格，在element动态添加表格数据的时候，会根据每行的id展示不同的数据。但是在没有后端的情况下啊，把数据放一个数组里面会出现错乱，比如我点击第二项的添加，第一项添加的数据也会显示出来，那么我们要怎么办呢？ 思路：1、先创建一个大的数组，用于模拟后端数据库。 2、根据每一项的id不同，去大数组里面获取数据。 3、在添加的时候，根据id进行判断，只显示和当前
1.搭建vue项目计算机环境:Nodejs+npm+vue本人目前使用的版本： 使用vue脚手架（即vue/cli）创建项目，只需一行代码：vue create projectName网上有其他的创建方式，如:vue init webpack projectName两种方法创建出来的项目目录结构不相同，前者项目版本>3，后者项目版本是2.x，大家可根据自身需求选择对应的安装方式。目
公司前端框架使用element plus,自带的table比较基础,稍微复杂一点的功能就需要手搓或者引入其他组件库,所以查找了一下其他功能更完善的table组件,结果如下: 1.AG Grid 英国一家公司产品,据说功能强大,国内用的较少,对应中午文档就少,社区版开源免费,复杂一些的功能,如导出需要 ...
1、获取Element的弹框中的Dom元素**由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素，无法添加原生时间，如下拉加载**
下面提供稳健的获取弹框Dom元素的方法，
首先，由于弹框是由v-if判断，则可以在watch中监听v-if所对应的变量，在为true时，则弹框打开，此时去获取DOM元素，发现仍然获取不到。。。。
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传
vue数据更新UI不刷新显示的解决办法vue比较常见的坑就是数据(后台返回)更新了，但是UI界面并没有更新，常见于以下情况：一、数据为数组时1.通过数组索引修改数组元素例如：此时UI数据并不会刷新2.修改数组长度时：解决方案：如果data为JSON数组则如下：第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据备注:数组原型上的方法vue可直接检测到变化：pu
# Vue3 + TypeScript 可编辑表格实现指南
在前端开发中，创建一个可编辑表格是一个常见的需求。在这篇文章中，我们将介绍如何使用 Vue3 和 TypeScript 来实现一个简单的可编辑表格。整个实现流程将分成几个步骤，每个步骤会详细地说明需要做什么。
## 实现流程
以下是实现可编辑表格的步骤：
| 步骤 | 描述 |
| ---- | ---- |
| 1 | 创
vue-admin-template 动态路由采用的是 vue-admin-template 后台管理系统模板，大家耐心看完绝对就能解决动态路由了1、首先在 router>index.js下面的内容，这部分倒是没有什么特别大的改动：import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/**
* N
vue虚拟列表-vue-virtual-scroll-list vue虚拟列表-vue-virtual-scroll-listvue虚拟列表-vue-virtual-scroll-list使用场景安装使用 使用场景因为公司做了类似于百度网盘的竞品，所以用户如果上传了很多的文件，就会造成页面DOM元素的过多，然后因为需要操作DOM元素，所以页面会变得很卡。所以用虚拟列表来解决。安装安装的话这个插件有
转载
2024-01-12 06:41:40
1391阅读
前言今年随着Vue3的成为正式版本，我们的Element-plus也有了稳定版，那今天我们主要是讲一个功能。我们先来看一下Element-plus新出现的一个玩意: image.png
虚拟列表选择器？这是啥玩意，还能虚拟？大家都知道Vue的虚拟dom，我用简单的话讲述一下：大概就是一棵以 JavaScript 对象作为基础的树，每一个节点称为 VNode ，用对象属性来描述节点，实际
vue中实现一个虚拟列表应用场景前端的业务开发中会遇到不使用分页方式来加载长列表的需求。如在数据长度大于 1000 条情况，DOM 元素的创建和渲染需要的时间成本很高，完整渲染列表所需要的时间不可接受，同时会存在滚动时卡顿问题；解决该卡顿问题的重点在于如何降低长列表DOM渲染成本问题，文章将介绍通过虚拟列表渲染的方式解决该问题。为什么需要虚拟列表虚拟列表是对长列表的一种优化方案。在前端开发中，会碰
转载
2023-09-25 17:28:45
641阅读
在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道vue@2.0 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。 虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真
转载
2023-12-29 19:45:02
118阅读
前提:在我负责一个模块中，有一个是日志管理模块，它会输出很多很多的操作的日志，起初与后台对接对接的时候并没有考虑到性能渲染问题，只是简单的用v-for把所有的数据都渲染出来，那么这样导致的后果就是页面卡顿，这个原因是你的模块中渲染出太多的DOM节点导致，为了避免这样的问题我采取了虚拟列表来进行渲染。什么是虚拟列表虚拟列表就是一个按需渲染的过程，简单来说就是渲染你所看到的内容，对于你非可视的内容不进
转载
2024-03-11 15:12:12
228阅读
vue项目实现按需加载的3种方式vue异步组件ES6提案的import()webpack提供的require.ensure() 一、为什么要使用路由懒加载为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
1.v-for： <ul> <li v-for="book in books"> <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3> </li> </ul> javascript： data() { return { book ...
转载
2021-09-11 22:45:00
651阅读
2评论
挂载#app <div id="app"></div> <script src="../js/vue.js"></script> <script> Vue.createApp({ template: `<h2>你好啊, 李银河</h2>` }).mount("#app"); </script> 问题 ...
转载
2021-07-17 15:38:00
665阅读
2评论
