脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue easytable组件

vue easytable组件使用详解

 更新时间：2023年09月04日 11:03:37   作者：书中自有妍如玉  
Vue Easytable是一个基于Vue.js的数据表格组件库,它提供丰富的功能和灵活的配置,帮助开发者快速搭建复杂的数据表格界面,这篇文章主要介绍了vue easytable组件使用,需要的朋友可以参考下

Vue Easytable是一个基于Vue.js的数据表格组件库。它提供丰富的功能和灵活的配置，帮助开发者快速搭建复杂的数据表格界面。

中文官网

https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/intro

 1.安装

npm install vue-easytable

2.完整引入

在 main.js 中写入以下内容：

import Vue from "vue";
// 引入样式
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import VueEasytable from "vue-easytable";
Vue.use(VueEasytable);
new Vue({
    el: "#app",
    render: (h) => h(App),
});

按需引入

import Vue from "vue";
// 引入样式
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import { VeTable, VePagination, VeIcon, VeLoading, VeLocale } from "vue-easytable";
Vue.use(VeTable);
Vue.use(VePagination);
Vue.use(VeIcon);
Vue.use(VeLoading);
Vue.prototype.$veLoading = VeLoading;
Vue.prototype.$veLocale = VeLocale;
new Vue({
    el: "#app",
    render: (h) => h(App),
});

CDN 方式使用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/libs/theme-default/index.css" rel="external nofollow" >
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-easytable/libs/umd/index.js"></script>

示例

<template>
    <ve-table :columns="columns" :table-data="tableData" />
</template>
<script>
    export default {
        data() {
            return {
                columns: [
                    { field: "name", key: "a", title: "Name", align: "center" },
                    { field: "date", key: "b", title: "Date", align: "left" },
                    {
                        field: "hobby",
                        key: "c",
                        title: "Hobby",
                        align: "right",
                    },
                    {
                        field: "address",
                        key: "d",
                        title: "Address",
                    },
                ],
                tableData: [
                    {
                        name: "John",
                        date: "1900-05-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Shanghai",
                    },
                    {
                        name: "Dickerson",
                        date: "1910-06-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Beijing",
                    },
                    {
                        name: "Larsen",
                        date: "2000-07-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Chongqing",
                    },
                    {
                        name: "Geneva",
                        date: "2010-08-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Xiamen",
                    },
                    {
                        name: "Jami",
                        date: "2020-09-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Shenzhen",
                    },
                ],
            };
        },
    };
</script>

到此这篇关于vue easytable组件的文章就介绍到这了,更多相关vue easytable组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3.0导出数据为自定义样式Excel的详细实例

    Vue3.0导出数据为自定义样式Excel的详细实例

    在许多的后台系统中少不了导出Excel表格的功能,下面这篇文章主要给大家介绍了关于Vue3.0导出数据为自定义样式Excel的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue2.0父子组件间通信的实现方法

    vue2.0父子组件间通信的实现方法

    本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解

    Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解

    在 Vue 3 开发中,经常需要在不同组件或页面之间传递数据,例如从 index 页面获取某个数值（如 cntr、tradeId）后,将其传输到 form 页面进行填写或编辑,本文将介绍几种常见的数据传输方法,并为每种方法提供一个小的 Demo 代码示例,需要的朋友可以参考下
    2025-02-02
  • Vue.js轮播图走马灯代码实例（全）

    Vue.js轮播图走马灯代码实例（全）

    这篇文章主要介绍了Vue.js轮播图走马灯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 多个vue项目复用一个node_modules的问题

    多个vue项目复用一个node_modules的问题

    这篇文章主要介绍了多个vue项目复用一个node_modules的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue 动态修改a标签的样式的方法

    vue 动态修改a标签的样式的方法

    这篇文章主要介绍了vue 动态修改a标签的样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 解决vue+webpack打包路径的问题

    解决vue+webpack打包路径的问题

    下面小编就为大家分享一篇解决vue+webpack打包路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue 电商后台管理项目阶段性总结(推荐)

    Vue 电商后台管理项目阶段性总结(推荐)

    这篇文章主要介绍了Vue 电商后台管理项目阶段性总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Vue状态机的开启与停止操作详细讲解

    Vue状态机的开启与停止操作详细讲解

    Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue mvvm数据响应实现

    vue mvvm数据响应实现

    这篇文章主要介绍了vue mvvm数据响应实现的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-11-11

最新评论