vue easytable組件使用詳解

更新時間：2023年09月04日 11:03:37 作者：書中自有妍如玉

Vue Easytable是一個基于Vue.js的數(shù)據(jù)表格組件庫,它提供豐富的功能和靈活的配置,幫助開發(fā)者快速搭建復雜的數(shù)據(jù)表格界面,這篇文章主要介紹了vue easytable組件使用,需要的朋友可以參考下

1.安裝

npm install vue-easytable

2.完整引入

在 main.js 中寫入以下內(nèi)容：

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"  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組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: