vxe-table-plugin-element （该版本已停止维护）

！！！您正在查看的是 vxe-table 4.0 ~ 4.6 版本的扩展插件，该插件于 2024-12-01 起停止维护，此后它将不再推出新功能、更新或修复补丁。最新版本为 vxe-table 4.7+，对应扩展插件库 @vxe-ui/plugin-render-element，建议及时更新到新版本，避免出现 bug 与安全问题！！！

基于 vxe-table 表格的适配插件，用于兼容 element-plus 组件库

Compatibility

对应 vxe-table v4 版本
如果您使用的是 vxe-table 4.7+ 最新版本，建议使用更强大的 @vxe-ui/plugin-render-element 适配器，代码完全兼容

Installing

npm install vxe-table@next vxe-table-plugin-element@next element-plus

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

VXETable.use(VXETablePluginElement)

API

cell-render 默认的渲染配置项说明

属性	描述	类型	可选值	默认值
name	支持的渲染组件	String	ElInput, ElAutocomplete, ElInputNumber, ElSwitch, ElRate, ElSlider, ElButton, ElButtons	—
attrs	渲染组件附加属性，参数请查看被渲染的 Component attrs	Object	—	{}
props	渲染组件附加属性，参数请查看被渲染的 Component props	Object	—	{}
options	只对 name=ElSelect 有效，下拉组件选项列表	Array	—	[]
optionProps	只对 name=ElSelect 有效，下拉组件选项属性参数配置	Object	—	{ value: 'value', label: 'label' }
optionGroups	只对 name=ElSelect 有效，下拉组件分组选项列表	Array	—	[]
optionGroupProps	只对 name=ElSelect 有效，下拉组件分组选项属性参数配置	Object	—	{ options: 'options', label: 'label' }
events	渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments )	Object	—	—
nativeEvents	渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments )	Object	—	—

edit-render 可编辑渲染器配置项说明

属性	描述	类型	可选值	默认值
name	支持的渲染组件	String	ElInput, ElAutocomplete, ElInputNumber, ElSelect, ElCascader, ElTimeSelect, ElTimePicker, ElDatePicker, ElSwitch, ElRate, ElSlider, ElButton, ElButtons	—
attrs	渲染组件附加属性，参数请查看被渲染的 Component attrs	Object	—	{}
props	渲染组件附加属性，参数请查看被渲染的 Component props	Object	—	{}
options	只对 name=ElSelect 有效，下拉组件选项列表	Array	—	[]
optionProps	只对 name=ElSelect 有效，下拉组件选项属性参数配置	Object	—	{ value: 'value', label: 'label' }
optionGroups	只对 name=ElSelect 有效，下拉组件分组选项列表	Array	—	[]
optionGroupProps	只对 name=ElSelect 有效，下拉组件分组选项属性参数配置	Object	—	{ options: 'options', label: 'label' }
events	渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments )	Object	—	—
nativeEvents	渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments )	Object	—	—

filter-render 筛选渲染器配置项说明

属性	描述	类型	可选值	默认值
name	支持的渲染组件	String	ElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider	—
attrs	渲染组件附加属性，参数请查看被渲染的 Component attrs	Object	—	{}
props	渲染组件附加属性，参数请查看被渲染的 Component props	Object	—	{}
options	只对 name=ElSelect 有效，下拉组件选项列表	Array	—	[]
optionProps	只对 name=ElSelect 有效，下拉组件选项属性参数配置	Object	—	{ value: 'value', label: 'label' }
optionGroups	只对 name=ElSelect 有效，下拉组件分组选项列表	Array	—	[]
optionGroupProps	只对 name=ElSelect 有效，下拉组件分组选项属性参数配置	Object	—	{ options: 'options', label: 'label' }
events	渲染组件附加事件，参数为 ( {}, ...Component arguments )	Object	—	—
nativeEvents	渲染组件附加事件，参数为 ( {}, ...Component arguments )	Object	—	—

item-render 表单-项渲染器配置项说明

属性	描述	类型	可选值	默认值
name	支持的渲染组件	String	ElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider, ElRadio, ElCheckbox, ElButton, ElButtons	—
attrs	渲染组件附加属性，参数请查看被渲染的 Component attrs	Object	—	{}
props	渲染组件附加属性，参数请查看被渲染的 Component props	Object	—	{}
options	只对 name=ElSelect 有效，下拉组件选项列表	Array	—	[]
optionProps	只对 name=ElSelect 有效，下拉组件选项属性参数配置	Object	—	{ value: 'value', label: 'label' }
optionGroups	只对 name=ElSelect 有效，下拉组件分组选项列表	Array	—	[]
optionGroupProps	只对 name=ElSelect 有效，下拉组件分组选项属性参数配置	Object	—	{ options: 'options', label: 'label' }
events	渲染组件附加事件，参数为 ( {}, ...Component arguments )	Object	—	—
nativeEvents	渲染组件附加事件，参数为 ( {}, ...Component arguments )	Object	—	—

Cell demo

<vxe-table
  height="600"
  :data="tableData"
  :edit-config="{trigger: 'click', mode: 'cell'}">
  <vxe-column field="name" title="Name" :edit-render="{}">
    <template #edit="{ row }">
      <el-input v-model="row.name"></el-input>
    </template>
  </vxe-column>
  <vxe-column field="age" title="Age" :edit-render="{}">
    <template #edit="{ row }">
      <el-input-number v-model="row.age"></el-input-number>
    </template>
  </vxe-column>
  <vxe-column field="date" title="Date" width="200" :edit-render="{}">
    <template #edit="{ row }">
      <el-date-picker v-model="row.date" type="date"></el-date-picker>
    </template>
  </vxe-column>
</vxe-table>

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 }
      ]
    }
  }
}

Filter demo

<vxe-table
  height="600"
  :data="tableData">
  <vxe-column field="name" title="Name"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
  <vxe-column field="date" title="Date" :filters="[{data: []}]" :filter-render="{name: 'ElDatePicker', props: {type: 'daterange'}}">
    <template #filter="{ $panel, column }">
      <el-input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)"></el-input>
    </template>
  </vxe-column>
</vxe-table>

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 }
      ]
    }
  }
})

Name	Name	Last commit message	Last commit date
Latest commit History 224 Commits 224 Commits
.gitee	.gitee
.github/ISSUE_TEMPLATE	.github/ISSUE_TEMPLATE
types	types
.eslintrc.js	.eslintrc.js
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md
gulpfile.js	gulpfile.js
index.ts	index.ts
package.json	package.json
style.scss	style.scss
tsconfig.json	tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

vxe-table-plugin-element （该版本已停止维护）

Compatibility

Installing

API

cell-render 默认的渲染配置项说明

edit-render 可编辑渲染器配置项说明

filter-render 筛选渲染器配置项说明

item-render 表单-项渲染器配置项说明

Cell demo

Filter demo

License

About

Releases

Packages

Used by

Contributors

Languages

Search code, repositories, users, issues, pull requests...

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

vxe-table-plugin-element （该版本已停止维护）

Compatibility

Installing

API

cell-render 默认的渲染配置项说明

edit-render 可编辑渲染器配置项说明

filter-render 筛选渲染器配置项说明

item-render 表单-项渲染器配置项说明

Cell demo

Filter demo

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages