vue easytable组件使用详解
作者：书中自有妍如玉
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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！