vue如何获取表格某行数据

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $routeparamsid 获取文章数据

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter守卫中获取数据，当数据获取成功后只调用 next 方法。

JSON。parse()作用是将字符串转化成json数组，JSONstringify()作用是将json数组转换成字符串

对浏览器来说，使用Web Storage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStorage

所以上次使用cookie的时候就遇到了一个坑，设置后马上访问session会获取不到，蛋痛，还需要刷新一下，原因是：

当我们首次访问设置Cookie的页面是，服务器会把设置的Cookie值通过响应头送过来，告诉浏览器将cookie存储的本地相应文件夹中(注意：第一次访问时本地还没有存储Cookie，所以此时获取不到值)；

当第二次访问时（或是进行cookie设置后，过期前所有的访问）时，请求头信息中你都会把Cookie值携带。

localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。

sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。

localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）

sessionStorage作用域是窗口、协议、主机名、端口。

知道了这些知识点后，你的问题就很好解决了。

localStorage是window上的。所以不需要写thislocalStorage，vue中如果写this，是指vue实例。会报错

需要打开testvue组件。

可以打开浏览器，查看数据有没有保存在浏览器里面，选择Application，点击sessionStorage，可以看到login登录接口的返回值已经存储到浏览器了，打开testvue组件，在需要使用到返回值的位置写获取sessionStorage的值。

window。sessionStorage。setItem是保存电脑上数据语法的意思。

如果我们的业务逻辑需要请求多个数据，并且后一个请求依赖于前一个请求的结果，这时候我们更不能保证数据获取顺序，因此我们需要将异步请求改成同步，以保证业务逻辑的正确性。

async 与 await

异步的，其放在我们所定义的 function 名前，如：

显然 异步执行的方法，能够通过这个关键字，等待请求结果，实现将异步执行的方法变成同步的。

好了，问题解决，只要在请求时加上await就可以了！

结果输出：

是的，结果确实是正确的，但还有一个规则还没有讲，那就是 async 与 await 必须同时出现 所以我们的代码实际是这样的：

以上就是关于vue如何获取表格某行数据全部的内容，包括:vue如何获取表格某行数据、vue导航完成前后获取数据、vue中使用localStorage存储信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！