Vue el-table的一些小用法(行内链接,图标等,持续更新)

Vue el-table的一些小用法(行内链接,图标等,持续更新),第1张

最近在使用el-table时经常用到的一些小的需求处理,这里做个记录以便查阅。(截图中用的数据是乱的不要在意)

直接利用slot插槽就可以添加图标了,我这里是直接用img标签引入,用svg应该也是一样的

解释一下就是,某一行的某一列属性上需要一个点击它就能跳转到另一个页面(类似详情页面)的功能

这是在网上看到的先记录一下

通常情况下,在构建 JavaScript 应用程序时,您希望从远程源或从API获取数据。我最近研究了一些公开的API,发现可以使用这些数据源完成很多很酷的东西。

更多来自作者的提示

快速提示:如何在JavaScript中排序对象数组

使用Vuejs,可以逐步地构建围绕其中一个服务的应用程序,并在几分钟内就可以开始向用户提供内容服务。

我将演示如何构建一个简单的新闻应用程序,它可以显示当天的热门新闻文章,并允许用户按照他们的兴趣类别进行过滤,从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

下面是最终应用的外观:

要学习本教程,您将需要一些非常基本的Vuejs的知识。 您可以在这里找到一个很棒的“入门指南”。 我还将使用ES6语法,您可以到这里进一步学习:

项目结构

为了保持简单,我们只使用2个文件:

/appjs /indexhtml

appjs将包含我们应用程序的所有逻辑,indexhtml 文件将包含我们应用程序的主视图。

我们先在 indexhtml 中写一些基本的标记:

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>The greatest news app ever</title>   </head>   <body>     <div id="app">       <h3>VueNews</h3>      </div>   </body> </html>

然后,在indexhtml的底部导入 Vuejs和appjs,就在</body>标签之前:

<script src="/vue"></script> <script src="appjs"></script>

可选的,我们还可以导入Foundation,以利用一些预先创建的样式,来使我们的视图看起来更好一点。

<link rel="stylesheet" ajax/libs/foundation/631/css/foundationmincss">

创建一个简单的 Vue App

首先,我们将在div#app 元素上创建一个新的 Vue 实例,并使用一些测试数据来模拟新闻API的响应:

// /appjs const vm = new Vue({   el: '#app',   data: {     results: [       {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},       {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},       {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},       {title: "four the last time", abstract: "lorem ipsum some test dimsum"}     ]   } });

我们通过el选项告诉 Vue 要挂载的目标元素,并通过data选项指定我们的应用程序用到的数据。

要在我们的应用程序视图中显示这些模拟数据,我们可以在#app元素中写入下面的标记:

<!-- /indexhtml --> <div class="columns medium-3" v-for="result in results">   <div>     <div>       {{ resulttitle }}     </div>     <div>       <p>{{ resultabstract }}</p>     </div>   </div> </div>

v-for 指令用于渲染我们的 results 列表。 我们使用双花括号来显示每一项的内容。

您可以在 Vue 模板语法 这里阅读更多内容

我们现在已经完成了基本的布局工作:

从 API 获取数据

要使用 纽约时报API,您需要获得一个API密钥。所以如果你还没有,注册并获取一个热点事件API的API密钥。

创建ajax请求和处理响应

Axios是一个基于 Promise 的>

以前,vue-resource 通常用于Vue项目,但现在已经退休了。

vue路由嵌套中通过符号添加超链接。

1、循环数据menuList展示菜单列表,每个菜单需要使用添加链接。

2、使用告诉vue-router把菜单链接匹配到的组件渲染到相应位置。

3、使用fixed定位将菜单固定在浏览器左边,同时设置top和bottom使菜单垂直方向上铺满浏览器。

以上就是关于Vue el-table的一些小用法(行内链接,图标等,持续更新)全部的内容,包括:Vue el-table的一些小用法(行内链接,图标等,持续更新)、Vue 数据怎么获取使用外部的数据、vue路由嵌套中怎样添加超链接等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9725138.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存