Vxe Table Plugin Element

https://github.com/x-extends/vxe-table-plugin-element
Admin
A plugin for vxe-table that provides compatibility and integration with the Element Plus component...
Tokens:39,005
Snippets:447
Trust Score:8.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### ElTimeSelect Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring a table column to use ElTimeSelect for editing. Supports custom start, end, and step times.

```typescript
{
  field: 'shiftTime',
  title: 'Shift Time',
  editRender: {
    name: 'ElTimeSelect',
    props: {
      placeholder: 'Select time',
      start: '08:00',
      end: '17:00',
      step: '00:30'
    }
  }
}
```

--------------------------------

### Install VXETablePluginElement

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/types.md

Import and use the VXETablePluginElement with the VXETableCore instance. Ensure VXE Table is installed before using the plugin.

```typescript
import { VXETableCore } from 'vxe-table'

const vxetable: VXETableCore = VXETable
VXETable.use(VXETablePluginElement)
```

--------------------------------

### Install vxe-table-plugin-element

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

Import and use the Element UI plugin with VXETable. This is the initial setup step for integrating Element UI components.

```typescript
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'

VXETable.use(VXETablePluginElement)
```

--------------------------------

### ElRadio Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring a 'gender' field using ElRadio. This setup defines the field, its title, and the available options with their labels and values.

```typescript
{
  field: 'gender',
  title: 'Gender',
  itemRender: {
    name: 'ElRadio',
    options: [
      { label: 'Male', value: 'M' },
      { label: 'Female', value: 'F' },
      { label: 'Other', value: 'O' }
    ]
  }
}
```

--------------------------------

### ElSwitch Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring a table column to use ElSwitch for editing. Allows customization of active/inactive values and colors for visual feedback.

```typescript
{
  field: 'isActive',
  title: 'Active',
  editRender: {
    name: 'ElSwitch',
    props: {
      activeValue: true,
      inactiveValue: false,
      activeColor: '#13ce66',
      inactiveColor: '#ff4949'
    }
  }
}
```

--------------------------------

### Complete Vxe-Table Example with Element UI

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

A comprehensive example demonstrating a vxe-table with inline editing, filtering, and various styling options, using Element UI components for rendering.

```vue
<template>
  <vxe-table
    height="600"
    :data="tableData"
    :columns="columns"
    :edit-config="{
      trigger: 'click',
      mode: 'cell',
      showStatus: true
    }"
    :stripe="true"
    :border="true"
    :resizable="true"
    :highlight-hover-row="true"
  />
</template>

<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    return {
      tableData: [
        { id: 1, name: 'John', email: 'john@example.com', status: 1 },
        { id: 2, name: 'Jane', email: 'jane@example.com', status: 0 },
        { id: 3, name: 'Bob', email: 'bob@example.com', status: 1 }
      ],
      columns: [
        { type: 'seq', width: 50 },
        {
          field: 'name',
          title: 'Name',
          width: 150,
          editRender: { name: 'ElInput' }
        },
        {
          field: 'email',
          title: 'Email',
          editRender: { name: 'ElInput' }
        },
        {
          field: 'status',
          title: 'Status',
          editRender: {
            name: 'ElSelect',
            options: [
              { label: 'Active', value: 1 },
              { label: 'Inactive', value: 0 }
            ]
          }
        }
      ]
    }
  }
})
</script>
```

--------------------------------

### Install VXETablePluginElement

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/api-reference.md

Install the plugin into a VXE Table instance to enable Element Plus component integration. Ensure you import the necessary CSS for styling.

```typescript
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'

VXETable.use(VXETablePluginElement)
```

--------------------------------

### Install vxe-table and related packages

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Install vxe-table, vxe-table-plugin-element, and element-plus using npm. Ensure you are using vxe-table version 4.

```bash
npm install vxe-table@4 vxe-table-plugin-element element-plus
```

--------------------------------

### ElAutocomplete Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring ElAutocomplete for an editable field named 'department', including placeholder, fetchSuggestions function, and triggerOnFocus.

```typescript
{
  field: 'department',
  title: 'Department',
  editRender: {
    name: 'ElAutocomplete',
    props: {
      placeholder: 'Enter department',
      fetchSuggestions: (query, callback) => {
        // Fetch matching departments
      },
      triggerOnFocus: true
    }
  }
}
```

--------------------------------

### ElInputNumber Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring ElInputNumber for an editable field named 'quantity', setting min, max, step, and precision properties.

```typescript
{
  field: 'quantity',
  title: 'Quantity',
  editRender: {
    name: 'ElInputNumber',
    props: {
      min: 0,
      max: 9999,
      step: 1,
      precision: 0
    }
  }
}
```

--------------------------------

### ElCascader Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

An example of how to configure the ElCascader component for a 'region' field in vxe-table, specifying various props for customization.

```typescript
{
  field: 'region',
  title: 'Region',
  editRender: {
    name: 'ElCascader',
    props: {
      options: regionHierarchy,
      expandTrigger: 'hover',
      showAllLevels: true,
      separator: ' > ',
      clearable: true
    }
  }
}
```

--------------------------------

### VXETablePluginElement.install()

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/MANIFEST.txt

The main installation method for the VXE Table Plugin Element. This method is used to integrate the plugin with VXE Table.

```APIDOC
## VXETablePluginElement.install()

### Description
This method is the primary entry point for integrating the VXE Table Plugin Element into your VXE Table instance. It registers the necessary components, renderers, and configurations provided by the plugin.

### Method
`install`

### Parameters
This method typically does not accept any parameters directly for basic installation. Configuration options can be passed to the VXE Table instance itself or through a separate configuration API.

### Request Example
```javascript
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'

VXETable.use(VXETablePluginElement)
```

### Response
This method does not return a value. Its effect is to modify the VXE Table instance by adding the plugin's capabilities.
```

--------------------------------

### Install VXE Table Element Plugin

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Install the VXE Table Element Plus plugin as a Vue 3 plugin. Ensure VXE Table v4.x, Vue v3.x, and Element Plus are installed.

```typescript
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'

// Install the plugin
VXETable.use(VXETablePluginElement)
```

--------------------------------

### ElInput Cell Render Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example configuration for using ElInput as a cell renderer in a table, specifying field, title, and props like placeholder, maxlength, and clearable.

```typescript
{
  field: 'description',
  title: 'Description',
  cellRender: {
    name: 'ElInput',
    props: {
      placeholder: 'Enter description',
      maxlength: 500,
      clearable: true
    }
  }
}
```

--------------------------------

### Example Configuration - Single Time

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Configure the ElTimePicker for single time selection with a specific placeholder and time format.

```typescript
{
  field: 'startTime',
  title: 'Start Time',
  editRender: {
    name: 'ElTimePicker',
    props: {
      placeholder: 'Select time',
      format: 'hh:mm:ss'
    }
  }
}
```

--------------------------------

### Example: Date Range Filter Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Configure a filter for a date range field. This example demonstrates setting up the 'dateRange' field with a filter for a specific month and ElDatePicker props for a date range.

```typescript
{
  field: 'dateRange',
  title: 'Date Range',
  filters: [{ data: ['2024-01-01', '2024-01-31'] }],
  filterRender: {
    name: 'ElDatePicker',
    props: {
      type: 'daterange',
      startPlaceholder: 'Start date',
      endPlaceholder: 'End date'
    }
  }
}

// Matches: '2024-01-15', '2024-01-01', '2024-01-31'
// Does not match: '2023-12-31', '2024-02-01'
```

--------------------------------

### ElButton Cell Render Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring an ElButton as a cell renderer for a table column. Supports custom content, props, and click events.

```typescript
{
  field: 'actions',
  title: 'Actions',
  cellRender: {
    name: 'ElButton',
    content: 'Edit',
    props: {
      type: 'primary',
      size: 'small'
    },
    events: {
      click: (params) => {
        console.log('Button clicked on row', params.rowIndex)
      }
    }
  }
}
```

--------------------------------

### VXETablePluginElement.install

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

The main entry point for installing the VXETablePluginElement. It accepts a VXE Table instance and registers custom renderers and event interceptors for Element Plus compatibility. It also performs a version check for vxe-table.

```APIDOC
## VXETablePluginElement.install(vxetable: VXETableCore)

### Description
Main entry point for plugin installation. Accepts a VXE Table instance and registers 15 component renderers and 4 event interceptors for Element Plus compatibility. Validates vxe-table version is 4.x.

### Method
Install

### Parameters
#### Path Parameters
- **vxetable** (VXETableCore) - Required - The VXE Table instance to install the plugin into.

### Interceptors Registered
- `event.clearFilter` — Prevent filter clearing during dropdown interaction.
- `event.clearEdit` — Prevent edit clearing during dropdown interaction.
- `event.clearAreas` — Prevent area selection clearing during dropdown interaction.
- `event.clearActived` — Legacy version for backward compatibility.
```

--------------------------------

### ElSlider Range Slider Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring the ElSlider component for a range selection, suitable for fields like 'priceRange'. Supports properties like min, max, step, and enabling range mode.

```typescript
{
  field: 'priceRange',
  title: 'Price Range',
  editRender: {
    name: 'ElSlider',
    props: {
      min: 0,
      max: 1000,
      step: 10,
      range: true
    }
  }
}
```

--------------------------------

### ElRate Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring the ElRate component as an edit renderer for a 'rating' field. Supports properties like max rating, allowing half stars, and custom colors.

```typescript
{
  field: 'rating',
  title: 'Rating',
  editRender: {
    name: 'ElRate',
    props: {
      max: 5,
      allowHalf: false,
      colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A']
    }
  }
}
```

--------------------------------

### ElButtons Cell Render Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring ElButtons to render multiple action buttons within a table cell. Each child button can have its own props and event handlers.

```typescript
{
  field: 'actions',
  title: 'Actions',
  cellRender: {
    name: 'ElButtons',
    children: [
      {
        content: 'Edit',
        props: { type: 'primary', size: 'small' },
        events: {
          click: (params) => {
            // Handle edit
          }
        }
      },
      {
        content: 'Delete',
        props: { type: 'danger', size: 'small' },
        events: {
          click: (params) => {
            // Handle delete
          }
        }
      }
    ]
  }
}
```

--------------------------------

### Example: Single Date Filter Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Configure a filter for a single date field. This example shows how to set up the 'createDate' field with a specific date filter and ElDatePicker props.

```typescript
{
  field: 'createDate',
  title: 'Create Date',
  filters: [{ data: '2024-01-15' }],
  filterRender: {
    name: 'ElDatePicker',
    props: {
      type: 'date',
      format: 'YYYY-MM-DD'
    }
  }
}

// Matches: '2024-01-15'
// Does not match: '2024-01-14', '2024-01-16'
```

--------------------------------

### ElSlider Single Slider Example Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring the ElSlider component for a single value selection, suitable for fields like 'volume'. Supports properties like min, max, and step.

```typescript
{
  field: 'volume',
  title: 'Volume',
  editRender: {
    name: 'ElSlider',
    props: {
      min: 0,
      max: 100,
      step: 5,
      range: false
    }
  }
}
```

--------------------------------

### Example Configuration - Time Range

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Configure the ElTimePicker for selecting a time range, including range-specific placeholders, format, and separator.

```typescript
{
  field: 'workHours',
  title: 'Work Hours',
  editRender: {
    name: 'ElTimePicker',
    props: {
      isRange: true,
      startPlaceholder: 'Start time',
      endPlaceholder: 'End time',
      format: 'HH:mm',
      rangeSeparator: '-'
    }
  }
}
```

--------------------------------

### Custom Filter Method Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Example of implementing a custom filter method for a table column, allowing for specific filtering logic.

```typescript
{
  field: 'amount',
  title: 'Amount',
  filters: [{ data: '' }],
  filterRender: {
    name: 'ElInputNumber'
  },
  filterMethod: (params) => {
    const { option, row, column } = params
    const cellValue = row[column.field]
    return cellValue >= option.data
  }
}
```

--------------------------------

### ElDatePicker Configuration - Date Range

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example configuration for using ElDatePicker as an edit renderer for a date range field. Includes settings for range-specific placeholders, display format, and the separator between the start and end dates.

```typescript
{
  field: 'dateRange',
  title: 'Date Range',
  editRender: {
    name: 'ElDatePicker',
    props: {
      type: 'daterange',
      startPlaceholder: 'Start date',
      endPlaceholder: 'End date',
      format: 'YYYY-MM-DD',
      rangeSeparator: '-'
    }
  }
}
```

--------------------------------

### Configure Form Button

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

This example shows how to configure a button field in a VXE Form. It specifies the button's name, content, and associated props for styling and behavior.

```typescript
{
  field: 'action',
  title: 'Action',
  itemRender: {
    name: 'ElButton',
    content: 'Submit',
    props: {
      type: 'primary',
      size: 'small'
    }
  }
}
```

--------------------------------

### Check VXE Table Version

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Ensures the correct version of VXE Table is installed before initializing the plugin. This check is crucial for compatibility.

```typescript
if (!/^(4)\./.test(vxetable.version) && !/v4/i.test((vxetable as any).v)) {
  console.error('[vxe-table-plugin-element 4.x] Version vxe-table 4.x is required')
}
```

--------------------------------

### Register Element Plus Globally

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Ensure Element Plus is installed and globally registered to avoid components not rendering.

```typescript
import ElementPlus from 'element-plus'
app.use(ElementPlus)
```

--------------------------------

### Import XEUtils Utility Library

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/types.md

Import the XEUtils library for data manipulation. Commonly used methods include get, set, map, find, each, and assign.

```typescript
import XEUtils from 'xe-utils'
```

--------------------------------

### Exact Filter Method Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Shows column configuration for exact filtering with ElRate. Requires a strict equality match between the cell value and the filter data.

```typescript
{
  field: 'rating',
  title: 'Rating',
  filters: [{ data: 5 }],
  filterRender: {
    name: 'ElRate'
  }
}
```

--------------------------------

### Select Filter Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Implement a select filter with `ElSelect`. This example shows how to define options and enable multiple selections with a clearable option.

```typescript
{
  field: 'status',
  title: 'Status',
  filters: [{ data: null }],
  filterRender: {
    name: 'ElSelect',
    options: [
      { label: 'Active', value: 1 },
      { label: 'Inactive', value: 0 }
    ],
    props: {
      clearable: true,
      multiple: true
    }
  }
}
```

--------------------------------

### Enable Filtering in Vxe-Table

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Set up filtering capabilities for your table. This example shows how to enable remote filtering, which is useful for large datasets.

```vue
<template>
  <vxe-table
    :data="tableData"
    :columns="columns"
    :filter-config="{
      remote: false
    }"
  />
</template>
```

--------------------------------

### Register VXE Table Plugin Element

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/rendering-system.md

The entry point for the vxe-table-plugin-element, which installs the plugin by mixing Element Plus component renderers into VXE Table's renderer system.

```typescript
export const VXETablePluginElement = {
  install (vxetable: VXETableCore) {
    vxetable.renderer.mixin({
      // 15 component renderers registered here
    })
  }
}
```

--------------------------------

### ElSelect Configuration - Flat Options

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring ElSelect for a 'status' field using flat options. Includes placeholder and clearable properties.

```typescript
{
  field: 'status',
  title: 'Status',
  editRender: {
    name: 'ElSelect',
    options: [
      { label: 'Active', value: 1 },
      { label: 'Inactive', value: 0 }
    ],
    props: {
      clearable: true,
      placeholder: 'Select status'
    }
  }
}
```

--------------------------------

### Select Filter Method Example (Single Selection)

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Illustrates column configuration for single-selection filtering with ElSelect. Uses loose equality for matching cell values against filter data.

```typescript
{
  field: 'status',
  title: 'Status',
  filters: [{ data: '1' }],
  filterRender: {
    name: 'ElSelect',
    options: [
      { label: 'Active', value: '1' },
      { label: 'Inactive', value: '0' }
    ],
    props: { multiple: false }
  }
}
```

--------------------------------

### Fuzzy Filter Method Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Demonstrates column configuration for fuzzy filtering using ElInput. Matches rows where the cell value contains the filter data as a substring.

```typescript
{
  field: 'name',
  title: 'Name',
  filters: [{ data: 'John' }],
  filterRender: {
    name: 'ElInput'
  }
}
```

--------------------------------

### ElSelect Configuration - Grouped Options

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Example of configuring ElSelect for a 'category' field using grouped options. Supports custom placeholder.

```typescript
{
  field: 'category',
  title: 'Category',
  editRender: {
    name: 'ElSelect',
    optionGroups: [
      {
        label: 'Fruits',
        options: [
          { label: 'Apple', value: 'apple' },
          { label: 'Orange', value: 'orange' }
        ]
      },
      {
        label: 'Vegetables',
        options: [
          { label: 'Carrot', value: 'carrot' }
        ]
      }
    ],
    props: { placeholder: 'Select category' }
  }
}
```

--------------------------------

### Select Filter Method Example (Multiple Selection)

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Demonstrates column configuration for multi-selection filtering with ElSelect. Returns true if any of the filter values are present in the cell value array.

```typescript
{
  field: 'permissions',
  title: 'Permissions',
  filters: [{ data: ['read', 'write'] }],
  filterRender: {
    name: 'ElSelect',
    options: [
      { label: 'Read', value: 'read' },
      { label: 'Write', value: 'write' },
      { label: 'Admin', value: 'admin' }
    ],
    props: { multiple: true }
  }
}
```

--------------------------------

### Cell Value Caching Example

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

Demonstrates how formatted labels are cached for ElSelect components to enhance filtering performance. This caching mechanism is part of the plugin's optimization strategy.

```typescript
const { fullAllDataRowIdData } = $table.internalData
const rest = fullAllDataRowIdData[rowid]
rest.cellData = { [colid]: { value, label } }
```

--------------------------------

### Custom Filter Method Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Configure a column with a custom filter method to implement specific filtering logic. This example filters rows where the 'amount' is greater than or equal to the filter's data value.

```typescript
{
  field: 'amount',
  title: 'Amount',
  filters: [{ data: 100 }],
  filterRender: {
    name: 'ElInputNumber'
  },
  filterMethod: (params) => {
    const { option, row, column } = params
    const cellValue = row[column.field]
    // Custom logic: filter rows where amount >= filter value
    return cellValue >= option.data
  }
}
```

--------------------------------

### Get Event Target Node by Class

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Traverses the DOM tree starting from `event.target` to find a node matching a specific class name. Used to detect clicks within Element Plus dropdowns to prevent unintended filter/edit clearing.

```typescript
function getEventTargetNode(
  evnt: any,
  container: HTMLElement,
  className: string
): { flag: boolean, container?: HTMLElement, targetElem?: HTMLElement } {
  // ... implementation details ...
}
```

--------------------------------

### Configure Basic Input Cell Render

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Use 'ElInput' as a cell renderer for a column. Configure props like placeholder and maxlength, and apply custom attributes.

```typescript
{
  field: 'name',
  title: 'Name',
  cellRender: {
    name: 'ElInput',
    props: {
      placeholder: 'Enter name',
      maxlength: 50,
      clearable: true
    },
    attrs: {
      class: 'custom-input'
    }
  }
}
```

--------------------------------

### Get Vue 3 Model Property

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/rendering-system.md

Always returns 'modelValue' for Vue 3 v-model compatibility.

```typescript
function getModelProp(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
  return 'modelValue'  // Always uses Vue 3 v-model
}
```

--------------------------------

### Get Vue 3 Model Event

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/rendering-system.md

Always returns 'update:modelValue' for Vue 3 v-model pattern.

```typescript
function getModelEvent(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
  return 'update:modelValue'  // Always uses Vue 3 pattern
}
```

--------------------------------

### renderOptions

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Creates Element Plus option components (el-option VNodes) from a given array of options and mapping properties.

```APIDOC
## renderOptions

### Description
Creates Element Plus option components (el-option VNodes) from a given array of options and mapping properties.

### Signature
```typescript
function renderOptions(
  options: any[],
  optionProps: VxeGlobalRendererHandles.RenderOptionProps
): VNode[]
```

### Features
- Maps option properties via `optionProps`
- Respects `disabled` flag
- Creates unique keys for each option

### Returns
Array of el-option VNodes

### Example
```typescript
const options = [
  { name: 'Active', id: 1 },
  { name: 'Inactive', id: 0, disabled: true }
]
const vnodes = renderOptions(options, { label: 'name', value: 'id' })
// Creates el-option components with correct labels and values
```
```

--------------------------------

### Import and register plugins in main application

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Import necessary libraries including Element Plus, VXETable, and VXETablePluginElement in your main Vue application file. Register these plugins using app.use().

```typescript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(VXETable)
app.use(VXETablePluginElement)

app.mount('#app')
```

--------------------------------

### Select Dropdown Column Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Set up a column with a dropdown selection using Element UI's select component. Options can be pre-defined with labels and values.

```typescript
{
  field: 'department',
  title: 'Department',
  editRender: {
    name: 'ElSelect',
    options: [
      { label: 'Sales', value: 'sales' },
      { label: 'Marketing', value: 'marketing' },
      { label: 'Engineering', value: 'engineering' }
    ],
    props: {
      clearable: true,
      placeholder: 'Select department'
    }
  }
}
```

--------------------------------

### Date Range Filter

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Configure a date range filter for a column. Supports specifying start and end date placeholders and a display format.

```typescript
{
  field: 'createdDate',
  title: 'Created Date',
  filters: [{ data: null }],
  filterRender: {
    name: 'ElDatePicker',
    props: {
      type: 'daterange',
      startPlaceholder: 'Start date',
      endPlaceholder: 'End date',
      format: 'YYYY-MM-DD'
    }
  }
}
```

--------------------------------

### Import Dayjs Date Library

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/types.md

Import the Dayjs library for date formatting and parsing. Use it to parse dates with specific formats or format existing date objects.

```typescript
import dayjs from 'dayjs'
```

--------------------------------

### Time Range Cell Value Handling (ElTimePicker)

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/types.md

When the 'isRange' prop is true for ElTimePicker, the cell value should be an array containing the start and end times.

```typescript
cellValue: [startTime, endTime]
```

--------------------------------

### Configure Text Input Edit Render

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Use `ElInput` for text editing. Configure placeholder and maxlength via `props`. This is useful for simple text field inputs.

```typescript
{
  field: 'title',
  title: 'Title',
  editRender: {
    name: 'ElInput',
    props: {
      placeholder: 'Enter title',
      maxlength: 100
    }
  }
}
```

--------------------------------

### Simple Cell Display (renderDefault)

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/rendering-system.md

Use for components that display their own formatted value, such as ElInput or ElSwitch. This is a simple display method for cell values.

```typescript
renderDefault: createEditRender()
```

--------------------------------

### Define table data and columns with edit renderers

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Set up reactive table data and define columns with specific edit renderers using Element Plus components like ElInput, ElSelect, and ElDatePicker. Configure props for each renderer.

```typescript
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    return {
      tableData: [
        { id: 1, name: 'John', status: 1, date: '2024-01-15' },
        { id: 2, name: 'Jane', status: 0, date: '2024-01-16' },
        { id: 3, name: 'Bob', status: 1, date: '2024-01-17' }
      ],
      columns: [
        {
          field: 'name',
          title: 'Name',
          editRender: {
            name: 'ElInput',
            props: {
              placeholder: 'Enter name',
              maxlength: 50,
              clearable: true
            }
          }
        },
        {
          field: 'status',
          title: 'Status',
          editRender: {
            name: 'ElSelect',
            options: [
              { label: 'Active', value: 1 },
              { label: 'Inactive', value: 0 }
            ]
          }
        },
        {
          field: 'date',
          title: 'Date',
          editRender: {
            name: 'ElDatePicker',
            props: {
              type: 'date',
              format: 'YYYY-MM-DD'
            }
          }
        }
      ]
    }
  }
})
```

--------------------------------

### Create Reusable Column Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Defines a base configuration object for select components to be reused across multiple columns. This promotes consistency and reduces repetition.

```typescript
const baseSelectConfig = {
  name: 'ElSelect',
  props: {
    clearable: true,
    filterable: true
  },
  optionProps: {
    label: 'label',
    value: 'value'
  }
}

// Reuse in columns
{
  field: 'status',
  title: 'Status',
  editRender: {
    ...baseSelectConfig,
    options: statusOptions
  }
}
```

--------------------------------

### Form with Mixed Input Types

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Define a form with various input types including text, number, select, date picker, checkbox, and switch. Requires Vue 3 setup.

```typescript
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const formData = reactive({
      name: '',
      email: '',
      age: null,
      department: '',
      joinDate: '',
      permissions: [],
      isActive: false
    })

    const items = [
      {
        field: 'name',
        title: 'Name',
        itemRender: {
          name: 'ElInput',
          props: {
            placeholder: 'Enter name',
            maxlength: 50
          }
        }
      },
      {
        field: 'email',
        title: 'Email',
        itemRender: {
          name: 'ElInput',
          props: {
            type: 'email',
            placeholder: 'Enter email'
          }
        }
      },
      {
        field: 'age',
        title: 'Age',
        itemRender: {
          name: 'ElInputNumber',
          props: {
            min: 18,
            max: 65
          }
        }
      },
      {
        field: 'department',
        title: 'Department',
        itemRender: {
          name: 'ElSelect',
          options: [
            { label: 'Sales', value: 'sales' },
            { label: 'Marketing', value: 'marketing' },
            { label: 'Engineering', value: 'engineering' }
          ]
        }
      },
      {
        field: 'joinDate',
        title: 'Join Date',
        itemRender: {
          name: 'ElDatePicker',
          props: {
            type: 'date'
          }
        }
      },
      {
        field: 'permissions',
        title: 'Permissions',
        itemRender: {
          name: 'ElCheckbox',
          options: [
            { label: 'Read', value: 'read' },
            { label: 'Write', value: 'write' },
            { label: 'Delete', value: 'delete' }
          ]
        }
      },
      {
        field: 'isActive',
        title: 'Active',
        itemRender: {
          name: 'ElSwitch'
        }
      }
    ]

    return { formData, items }
  }
})
```

--------------------------------

### Flat Options Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Configure flat options for select, cascader, radio, and checkbox components using a simple array of label-value pairs.

```typescript
options: [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
  { label: 'Option 3', value: 'opt3', disabled: true }
]
```

--------------------------------

### Range Matching Algorithm

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

The `equalDaterange` function implements the range matching logic for date range filters. It ensures the cell value falls within the specified start and end dates.

```typescript
function equalDaterange(cellValue, data, props, defaultFormat) {
  cellValue = getFormatDate(cellValue, props, defaultFormat)
  return cellValue >= getFormatDate(data[0], props, defaultFormat) &&
         cellValue <= getFormatDate(data[1], props, defaultFormat)
}
```

--------------------------------

### Form Context Parameters

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

Outlines the parameters available within the form context for form operations. Includes form instance, form data, and the field path.

```typescript
{
  $form: FormInstance
  data: any             // Form data
  field: string         // Field path
}
```

--------------------------------

### ElAutocomplete Renderer Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Configuration for the ElAutocomplete renderer, including autofocus selector, default filter method (exact match), and render methods.

```typescript
{
  autofocus: 'input.el-input__inner',
  renderDefault: createEditRender(),
  renderEdit: createEditRender(),
  renderFilter: createFilterRender(),
  defaultFilterMethod: defaultExactFilterMethod,
  renderItemContent: createFormItemRender()
}
```

--------------------------------

### VXE Table Column Definition with Initial Filter

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Example of defining a column with an initial filter option. The 'data' property is used to set the initial filter value, which is then used by the default filter method.

```typescript
// Column definition
{
  field: 'name',
  title: 'Name',
  filters: [{ data: '' }]  // Initial filter option
}
```

--------------------------------

### VXE Table Column Definition with Multiple Filters

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Demonstrates how to configure a column to support multiple filter options. Each option in the 'filters' array represents a separate condition that is OR'd together.

```typescript
{
  field: 'email',
  title: 'Email',
  filters: [
    { data: '' },  // Filter 1
    { data: '' }   // Filter 2 (OR condition)
  ]
}
```

--------------------------------

### Get Vue 3 Model Property Name

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Retrieves the standard Vue 3 model property name, which is always 'modelValue' for v-model binding. Use this when binding component values in edit, filter, or form contexts.

```typescript
function getModelProp(renderOpts: VxeGlobalRendererHandles.RenderOptions): string {
  return 'modelValue'
}
```

--------------------------------

### Render Options Object Structure

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

Defines the structure for configuring component renderers in VXETablePluginElement. Includes properties for component name, attributes, props, placeholders, content, and options for various input types.

```typescript
{
  name: string                           // Component name
  attrs?: Record<string, any>            // HTML attributes
  props?: Record<string, any>            // Component props
  placeholder?: string                   // Cell placeholder
  content?: string                       // Button text
  children?: RenderOptions[]             // ElButtons children
  
  // Select/Cascader/Radio/Checkbox
  options?: any[]                        // Flat option list
  optionProps?: { label, value }         // Property mapping
  optionGroups?: any[]                   // Grouped options
  optionGroupProps?: { label, options }  // Group mapping
  
  // Event handling
  events?: Record<string, Function>      // Custom events
  nativeEvents?: Record<string, Function> // Native events
}
```

--------------------------------

### Get Vue 3 Model Change Event Name

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Returns the standard Vue 3 model change event name, which is always 'update:modelValue' for v-model binding. This standardizes model binding across Element Plus components.

```typescript
function getModelEvent(renderOpts: VxeGlobalRendererHandles.RenderOptions): string {
  return 'update:modelValue'
}
```

--------------------------------

### Cell Editing Data Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/README.md

Provides the sample data structure for the cell editing table. Ensure your data matches the expected fields for editing.

```javascript
export default {
  data () {
    return {
      tableData: [
        { id: 100, name: 'test0', age: 28, sex: '1', date: null },
        { id: 101, name: 'test1', age: 32, sex: '0', date: null },
        { id: 102, name: 'test2', age: 36, sex: '1', date: null }
      ]
    }
  }
}
```

--------------------------------

### Configure Date Picker Edit Render

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Use `ElDatePicker` for date selection. Specify the date type, placeholder, and format for input and value using `props`. This is suitable for date-related fields.

```typescript
{
  field: 'createdAt',
  title: 'Created Date',
  editRender: {
    name: 'ElDatePicker',
    props: {
      type: 'date',
      placeholder: 'Select date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD'
    }
  }
}
```

--------------------------------

### Filter Data Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/README.md

Defines the sample data for the table used in the filtering demo. This data structure is compatible with the filter configuration.

```javascript
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    return {
      tableData: [
        { id: 100, name: 'test0', age: 28, date: null },
        { id: 101, name: 'test1', age: 32, date: null },
        { id: 102, name: 'test2', age: 36, date: null }
      ]
    }
  }
})
```

--------------------------------

### Format Date with Value and Output Formats

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Formats a date value considering both input (`valueFormat`) and output (`format`) props, applying a default format if the output format is not provided. Returns the original value if the input value is empty.

```typescript
const props = {
  valueFormat: 'YYYY-MM-DD',
  format: 'MM/DD/YYYY'
}
const result = getFormatDate('2024-01-15', props, 'YYYY-MM-DD')
// Returns: '01/15/2024'
```

--------------------------------

### ElAutocomplete Renderer

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

The ElAutocomplete renderer provides a text input with a suggestion dropdown, suitable for fields requiring user selection from a predefined list. It supports remote data fetching and uses an exact match filter.

```APIDOC
## ElAutocomplete Renderer

### Description
Used for text input with a suggestion dropdown, ideal for selecting from a list of options. It supports remote data fetching and uses an exact match filter. The `select` event is used for chosen suggestions.

### Renderer Configuration
```typescript
{
  autofocus: 'input.el-input__inner',
  renderDefault: createEditRender(),
  renderEdit: createEditRender(),
  renderFilter: createFilterRender(),
  defaultFilterMethod: defaultExactFilterMethod,
  renderItemContent: createFormItemRender()
}
```

### Supported Props
- `placeholder`: Placeholder text
- `fetchSuggestions`: Function to fetch suggestions
- `triggerOnFocus`: Show suggestions on focus
- `highlightFirstItem`: Highlight first item
- `hideLoading`: Hide loading indicator
- `selectWhenUnmatched`: Select on no match

### Events
- `select`: Suggestion selected
- `input`: Text input
- `focus`: Focus gained
- `blur`: Focus lost

### Example Configuration
```typescript
{
  field: 'department',
  title: 'Department',
  editRender: {
    name: 'ElAutocomplete',
    props: {
      placeholder: 'Enter department',
      fetchSuggestions: (query, callback) => {
        // Fetch matching departments
      },
      triggerOnFocus: true
    }
  }
}
```
```

--------------------------------

### Dayjs Date Parsing and Formatting

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/types.md

Demonstrates parsing a date value with a specified format and formatting a date object. Common format strings are provided for various date and time representations.

```typescript
// Parse date with format
dayjs(value, format).date

// Format date
dayjs(date).format(format)
```

--------------------------------

### Create Standard Filter Render

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/filter-system.md

Use this factory function to create filter panels for standard input components like ElInput, ElInputNumber, ElAutocomplete, ElRate, and ElSwitch. It wraps each filter component in a div and handles data binding and confirmation logic.

```typescript
function createFilterRender(defaultProps?: { [key: string]: any }) {
  return function (renderOpts, params) {
    const { column } = params
    const { name, attrs } = renderOpts
    return [
      h('div', {
        class: 'vxe-table--filter-element-wrapper'
      }, column.filters.map((option, oIndex) => {
        const optionValue = option.data
        return h(resolveComponent(name), {
          key: oIndex,
          ...attrs,
          ...getCellEditFilterProps(renderOpts, params, optionValue, defaultProps),
          ...getFilterOns(renderOpts, params, option, () => {
            handleConfirmFilter(params, !!option.data, option)
          })
        })
      }))
    ]
  }
}
```

--------------------------------

### ElButton Renderer Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Configuration for the default cell display and inline editing renderers for ElButton.

```typescript
{
  renderDefault: defaultButtonEditRender,
  renderItemContent: defaultButtonItemRender
}
```

--------------------------------

### ElInput Component Props

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Configuration options for the ElInput component, including placeholder, length limits, and input type.

```typescript
props: {
  placeholder: 'Enter text',
  maxlength: 100,
  minlength: 1,
  clearable: true,
  readonly: false,
  disabled: false,
  type: 'text'  // text, password, textarea, etc.
}
```

--------------------------------

### Render Element Plus Options

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/rendering-system.md

Creates an array of Element Plus 'el-option' components from a given list of options. Supports custom label and value properties and respects the disabled flag.

```typescript
function renderOptions(options: any[], optionProps: RenderOptionProps) {
  const labelProp = optionProps.label || 'label'
  const valueProp = optionProps.value || 'value'
  return XEUtils.map(options, (item, oIndex) => {
    return h(resolveComponent('el-option'), {
      key: oIndex,
      value: item[valueProp],
      label: item[labelProp],
      disabled: item.disabled
    })
  })
}
```

--------------------------------

### Date Picker Column Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Integrate an Element UI date picker for date selection in a column. Specify date format and value format for consistency.

```typescript
{
  field: 'birthDate',
  title: 'Birth Date',
  editRender: {
    name: 'ElDatePicker',
    props: {
      type: 'date',
      placeholder: 'Select date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD'
    }
  }
}
```

--------------------------------

### ElTimePicker Renderer Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Basic configuration for the ElTimePicker renderer, including edit, cell, and form item rendering functions.

```typescript
{
  renderEdit: createEditRender(),
  renderCell (renderOpts, params) { /* ... */ },
  renderItemContent: createFormItemRender(),
  exportMethod: createExportMethod(getTimePickerCellValue)
}
```

--------------------------------

### Filter Context Parameters

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/README.md

Details the parameters provided in the filter context for column filtering. Includes table instance, filter panel instance, column definition, and column index.

```typescript
{
  $table: VxeTableInstance
  $panel: FilterPanel
  column: ColumnDef
  columnIndex: number
}
```

--------------------------------

### ElButtons Renderer Configuration

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/component-renderers.md

Configuration for the default cell display and inline editing renderers for ElButtons, which renders multiple buttons.

```typescript
{
  renderDefault: defaultButtonsEditRender,
  renderItemContent: defaultButtonsItemRender
}
```

--------------------------------

### Configure DatePicker Edit Render

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Configure the format and valueFormat props for 'ElDatePicker' to ensure dates display correctly and are not raw values or timestamps.

```typescript
{
  editRender: {
    name: 'ElDatePicker',
    props: {
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD'
    }
  }
}
```

--------------------------------

### getFormatDate

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/utilities-and-helpers.md

Formats a date value considering both `valueFormat` (input) and `format` (output) props. It applies a default format if the `format` prop is not specified and returns the formatted date string.

```APIDOC
## getFormatDate

### Description
Formats a date value considering both `valueFormat` and `format` props, applying a default format if necessary.

### Signature
```typescript
function getFormatDate(value: any, props: { [key: string]: any }, defaultFormat: string): string
```

### Parameters
- **value** (any) - The date value to format.
- **props** ({ [key: string]: any }) - An object containing date formatting props, potentially including `valueFormat` and `format`.
- **defaultFormat** (string) - The default format string to use if `props.format` is not provided.

### Logic
```typescript
return value ? toDayDateString(parseDate(value, props), props.format || defaultFormat) : value
```

### Purpose
- Handles both `valueFormat` (input) and `format` (output).
- Applies default format if `format` prop not specified.
- Returns empty value unchanged.

### Example
```typescript
const props = {
  valueFormat: 'YYYY-MM-DD',
  format: 'MM/DD/YYYY'
}
const result = getFormatDate('2024-01-15', props, 'YYYY-MM-DD')
// Returns: '01/15/2024'
```
```

--------------------------------

### Configure Edit Render for Input

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/quick-start.md

Use the correct editRender configuration with 'ElInput' for the component to be automatically bound to row data when changes are made in edit mode.

```typescript
{
  editRender: {
    name: 'ElInput'
    // Component is automatically bound to row data
  }
}
```

--------------------------------

### Configure Event Handlers for Components

Source: https://github.com/x-extends/vxe-table-plugin-element/blob/master/_autodocs/configuration.md

Events are configured via the `events` property in render options. All events receive a params object as the first argument. Use this for custom input handling or validation.

```typescript
{
  field: 'email',
  title: 'Email',
  editRender: {
    name: 'ElInput',
    events: {
      input: (params, value) => {
        console.log(`Row ${params.rowIndex}: ${value}`)
      },
      blur: (params, event) => {
        // Validate email on blur
      }
    }
  }
}
```
Tokens:
Raw