### Basic Table Setup with Vue EasyTable
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/start.md
This example demonstrates how to set up a basic table using Vue EasyTable. It includes importing the necessary CSS and JavaScript files, defining table columns, and providing sample data.
```html
```
--------------------------------
### Install Vue EasyTable with npm
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/start.md
Use npm to install the vue-easytable package.
```bash
npm install vue-easytable
```
--------------------------------
### Install Vue EasyTable with yarn
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/start.md
Use yarn to install the vue-easytable package.
```bash
yarn add vue-easytable
```
--------------------------------
### Basic Pagination Setup
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-pagination/base-usage.md
Use the `ve-pagination` component by providing the `total` prop to specify the total number of items for pagination.
```html
```
--------------------------------
### Basic Vue EasyTable Example
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/start.md
A simple example demonstrating how to use the VeTable component with columns and table data. Ensure you have imported the necessary components and styles.
```html
```
--------------------------------
### Install VeContextmenu
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-contextmenu/usage.md
Import and register the VeContextmenu component globally in your Vue application. This setup is required before using the component in your templates.
```javascript
import Vue from "vue";
import { VeContextmenu } from "vue-easytable";
Vue.use(VeContextmenu);
```
--------------------------------
### Configure Page Size Options
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-pagination/paging-configuration.md
Set the available options for the page size dropdown using the `pageSizeOption` prop. This example shows how to provide an array of numbers to define the selectable page sizes.
```html
```
--------------------------------
### Install Vue EasyTable
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/usage/main.md
Import and register the VeTable component globally in your Vue application.
```javascript
import Vue from "vue";
import { VeTable } from "vue-easytable";
Vue.use(VeTable);
```
--------------------------------
### Set Page Size for Pagination
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-pagination/page-size.md
Use the `page-size` prop to define the number of items displayed on each page. This example sets the page size to 30 items.
```html
```
--------------------------------
### Enable Clipboard Feature
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/clipboard/base.md
Configure the `clipboard-option` to enable copying data from the table. This example shows basic enabling.
```html
```
--------------------------------
### Basic VeTable with Header Filter
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/header-filter/single-filter.md
This snippet shows the basic setup for a VeTable with fixed header and height, including columns and table data. It serves as a foundation for implementing header filters.
```html
```
--------------------------------
### Project Entry File for Customized Blue Theme
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/theme.md
Import your custom Less variables file in your project's entry file after installing Vue EasyTable. This ensures your custom styles are applied.
```javascript
import Vue from 'vue'
import VueEasytable from 'vue-easytable'
import './vue-easytable-variables.less'
```
--------------------------------
### Vue EasyTable Initialization and Data Configuration
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/umd-test/ve-table/index.html
This snippet shows the basic setup for a Vue instance with EasyTable, including data, column definitions, and event handlers. It configures cell value changes and expandable rows.
```javascript
new Vue({
el: "#app",
data: function () {
return {
editOption: {
// cell value change
cellValueChange: ({ row, column }) => {
console.log("cellValueChange row::", row);
console.log("cellValueChange column::", column);
},
},
expandOption: {
defaultExpandedRowKeys: [1001, 1003],
render: ({ row, column, rowIndex }, h) => {
return h(
"div",
{
style: {
color: "red",
},
},
row.name
);
},
},
columns: [
{
field: "",
key: "a",
type: "expand",
title: "",
width: 50,
align: "center",
},
{
field: "date",
key: "b",
title: "Date",
width: 200,
align: "center",
renderBodyCell: ({ row }, h) => {
return h("div", row.date);
},
},
{
field: "hobby",
key: "c",
title: "Hobby",
width: 300,
align: "left",
edit: true,
},
{
field: "address",
key: "d",
title: "Address",
width: "",
align: "left",
edit: true,
},
],
tableData: [
{
rowKey: 1001,
name: "John",
date: "1900-05-20",
hobby: "coding",
address: "No.1 Century Avenue, Shanghai",
},
{
rowKey: 1002,
name: "Dickerson",
date: "1910-06-20",
hobby: "coding",
address: "No.1 Century Avenue, Beijing",
},
{
rowKey: 1003,
name: "Larsen",
date: "2000-07-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Chongqing",
},
{
rowKey: 1004,
name: "Geneva",
date: "2010-08-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Xiamen",
},
{
rowKey: 1005,
name: "Jami",
date: "2020-09-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Shenzhen",
},
],
};
},
});
```
--------------------------------
### Vue EasyTable with Virtual Scroll and Auto Height
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/virtual-scroll/auto-height.md
This snippet shows a complete Vue component setup for Vue EasyTable. It configures virtual scrolling and sets a maximum height for the table, allowing it to handle a large number of rows (10,000 in this example) with dynamic row heights.
```html
```
--------------------------------
### Specify Loading Container and Type
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-loading/container.md
This example shows how to initialize a loading instance targeting a specific container element identified by its ID. It also sets the type of loading animation to 'wave'. The loading instance can be controlled using its `show`, `close`, and `destroy` methods.
```html
```
--------------------------------
### Vue EasyTable Row Checkbox Control Example
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/row-checkbox/selected-control.md
This snippet shows a complete Vue component setup for Vue EasyTable with row checkboxes enabled. It includes methods to toggle individual row selection, select all, and deselect all rows, along with handling selection change events.
```html
```
--------------------------------
### Basic Operation Column Setup in Vue EasyTable
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/operation-column/base.md
Configure a Vue EasyTable with an operation column. This example sets up columns, enables cell editing, and customizes row styling. The operation column is defined with `operationColumn: true` and a custom `renderBodyCell` function to display row indices.
```html
```
--------------------------------
### Start Editing Cell with Instance Method
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/cell-edit/instance-method.md
Opens a specific cell for editing using the `startEditingCell` method. You can provide a default value to pre-fill the cell. This is useful for programmatically initiating edits based on user actions or application logic.
```html
```
--------------------------------
### Set Range Cell Selection
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/cell-selection/range-selection-instance-methods.md
Sets a range of cells for selection using specified start and end row and column keys. Includes an option to scroll to the starting cell.
```javascript
setRangeCellSelection() {
this.$refs["tableRef"].setRangeCellSelection({
startRowKey: 30,
startColKey: "col2",
endRowKey: 32,
endColKey: "col4",
isScrollToStartCell: true,
});
}
```
--------------------------------
### Using Vue EasyTable Locale by CDN
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/locale.md
Demonstrates how to set up Vue EasyTable and switch languages when using CDN. Import necessary scripts and use VETable.VeLocale.use to change the language.
```html
```
--------------------------------
### Basic ve-icon Usage
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-icon/base.md
Demonstrates how to use the ve-icon component with different properties. The `name` property sets the icon, `color` sets its color, and `size` sets its dimensions.
```html
```
--------------------------------
### Combine Column Fixed Example
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/cell-edit/combine-column-fixed.md
This example shows a Vue EasyTable configuration with combined fixed columns (left and right) and nested column definitions. It includes cell editing and virtual scrolling.
```html
```
--------------------------------
### Auto Height Table Example
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/table-height/auto-height.md
When the table height is not explicitly set, Vue EasyTable defaults to auto height. This example demonstrates a basic table configuration where the height will adjust based on the number of rows.
```html
```
--------------------------------
### Customizing Loading Indicator
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-loading/custom.md
Use the `$veLoading` service to create a custom loading instance. Configure `target`, `name`, `color`, `tip`, and `overlayBackgroundColor` to tailor the loading experience. The `overlayBackgroundColor` can be set using RGBA values for transparency.
```html
```
--------------------------------
### Controlled Single Selection Example
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-radio/controlled.md
This example shows a controlled ve-radio component where the selection state is managed by the parent component's data. Use `isControlled` to enable controlled mode and `isSelected` to bind the selection state. The `on-radio-change` event emits the new selection value.
```html
受控单选
Radio
{{radioVal}}
```
--------------------------------
### Enable Column Resizing with Callback
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/column-resize/basic.md
This snippet shows how to enable column resizing by setting `column-width-resize-option.enable` to true. It also demonstrates how to capture column resize events using the `sizeChange` callback, which provides details about the column, the difference in width, and the new column width.
```html
column:{{columnResizeInfo.column}}
differWidth:{{columnResizeInfo.differWidth}}
columnWidth:{{columnResizeInfo.columnWidth}}
```
--------------------------------
### Enable Row Click Highlight
Source: https://github.com/happy-coding-clans/vue-easytable/blob/master/examples/src/docs/en/ve-table/row-style/click-highlight.md
Demonstrates how to enable row click highlighting by setting `row-style-option.clickHighlight` to true and providing a `row-key-field-name`. It also shows how to use the `setHighlightRow` method to highlight a specific row.
```html