More Premium Hugo Themes Premium Vue Themes

Hoc Element Table

基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件,开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发

Hoc Element Table

基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件,开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发

Author Avatar Theme by pdsuwwz
Github Stars Github Stars: 38
Last Commit Last Commit: Sep 19, 2023 -
First Commit Created: Apr 29, 2023 -
Hoc Element Table screenshot

Overview

The @hoc-element/table package is a plugin for Vue 3.x that provides a pre-configured table component based on the element-plus library. It aims to simplify table generation by allowing developers to configure tables through a configuration file instead of writing extensive HTML templates. This results in increased flexibility and efficiency in development.

Features

  • Built with Webpack 5
  • Full support for Vue 3
  • JSON serialization for quick table configuration
  • Built-in pagination
  • Customizable column names
  • Customizable cell rendering
  • Customizable cell styles
  • Support for custom directives
  • Support for element-plus Table events and methods
  • Control over the visibility of headers and pagination

Installation

To use the @hoc-element/table package, you need to have element-plus installed. Here are the steps to install the package:

  1. Install element-plus:
npm install element-plus
  1. Install @hoc-element/table:
npm install @hoc-element/table
  1. Import the package in your Vue component:
import { createApp } from 'vue';
import { h } from 'vue';
import App from './App.vue';
import HocElementTable from '@hoc-element/table';

const app = createApp({
  components: {
    HocElementTable,
  },
  render: () => h(App),
});

app.use(HocElementTable);
app.mount('#app');
  1. Use the hoc-element-table component in your Vue template:
<template>
  <hoc-element-table :data="tableData" :columns="tableColumns"></hoc-element-table>
</template>

Summary

The @hoc-element/table package is a Vue 3.x plugin that simplifies table generation by providing a pre-configured table component based on the element-plus library. With features such as JSON serialization, customizable rendering, and support for element-plus Table events and methods, it offers developers increased flexibility and efficiency in building tables. To use the package, element-plus needs to be installed, and the component can be easily integrated into Vue templates.