vxe-table-plugin-antd-mb
基于 vxe-table-plugin-antd V1.11.3 版本修改
1、调整 ADatePicker 组件支持传入日期类型字符串
2、install 增加 option 参数,方便设置默认参数
3、修复select多选模式bug
例如:VXETable.use(VXETablePluginAntd, { size: 'default' })
基于 vxe-table 表格的适配插件,用于兼容 ant-design-vue 组件库
Installing
npm install xe-utils vxe-table@3 vxe-table-plugin-antd@2 ant-design-vue@1
// ...
import VXETable from "vxe-table";
import VXETablePluginAntd from "vxe-table-plugin-antd-mb";
import "vxe-table-plugin-antd/dist/style.css";
// ...
VXETable.use(VXETablePluginAntd);
API
cell-render 默认的渲染器配置项说明
属性 |
描述 |
类型 |
可选值 |
默认值 |
name |
支持的渲染组件 |
String |
AInput, AAutocomplete, AInputNumber, ASwitch, ARate, AButton, AButtons |
— |
props |
渲染组件附加属性,参数请查看被渲染的 Component props |
Object |
— |
{} |
options |
只对 name=ASelect 有效,下拉组件选项列表 |
Array |
— |
[] |
optionProps |
只对 name=ASelect 有效,下拉组件选项属性参数配置 |
Object |
— |
{ value: 'value', label: 'label' } |
optionGroups |
只对 name=ASelect 有效,下拉组件分组选项列表 |
Array |
— |
[] |
optionGroupProps |
只对 name=ASelect 有效,下拉组件分组选项属性参数配置 |
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 |
AInput, AAutocomplete, AInputNumber, ASelect, ACascader, ADatePicker, AMonthPicker, ARangePicker, AWeekPicker, ATimePicker, ATreeSelect, ASwitch, ARate, AButton, AButtons |
— |
props |
渲染组件附加属性,参数请查看被渲染的 Component props |
Object |
— |
{} |
options |
只对 name=ASelect 有效,下拉组件选项列表 |
Array |
— |
[] |
optionProps |
只对 name=ASelect 有效,下拉组件选项属性参数配置 |
Object |
— |
{ value: 'value', label: 'label' } |
optionGroups |
只对 name=ASelect 有效,下拉组件分组选项列表 |
Array |
— |
[] |
optionGroupProps |
只对 name=ASelect 有效,下拉组件分组选项属性参数配置 |
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 |
AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate |
— |
props |
渲染组件附加属性,参数请查看被渲染的 Component props |
Object |
— |
{} |
options |
只对 name=ASelect 有效,下拉组件选项列表 |
Array |
— |
[] |
optionProps |
只对 name=ASelect 有效,下拉组件选项属性参数配置 |
Object |
— |
{ value: 'value', label: 'label' } |
optionGroups |
只对 name=ASelect 有效,下拉组件分组选项列表 |
Array |
— |
[] |
optionGroupProps |
只对 name=ASelect 有效,下拉组件分组选项属性参数配置 |
Object |
— |
{ options: 'options', label: 'label' } |
events |
渲染组件附加事件,参数为 ( {}, ...Component arguments ) |
Object |
— |
— |
nativeEvents |
渲染组件附加事件,参数为 ( {}, ...Component arguments ) |
Object |
— |
— |
item-render 表单-项选渲染器配置项说明
属性 |
描述 |
类型 |
可选值 |
默认值 |
name |
支持的渲染组件 |
String |
AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate, ARadio, ACheckbox, AButton, AButtons |
— |
props |
渲染组件附加属性,参数请查看被渲染的 Component props |
Object |
— |
{} |
options |
只对 name=ASelect 有效,下拉组件选项列表 |
Array |
— |
[] |
optionProps |
只对 name=ASelect 有效,下拉组件选项属性参数配置 |
Object |
— |
{ value: 'value', label: 'label' } |
optionGroups |
只对 name=ASelect 有效,下拉组件分组选项列表 |
Array |
— |
[] |
optionGroupProps |
只对 name=ASelect 有效,下拉组件分组选项属性参数配置 |
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 }">
<a-input v-model="row.name"></a-input>
</template>
</vxe-column>
<vxe-column field="age" title="Age" :edit-render="{}">
<template #edit="{ row }">
<a-input-number v-model="row.age"></a-input-number>
</template>
</vxe-column>
<vxe-column field="date" title="Date" width="200" :edit-render="{}">
<template #edit="{ row }">
<a-date-picker v-model="row.date" type="date"></a-date-picker>
</template>
</vxe-column>
</vxe-table>
import { defineComponent } from "vue";
export default defineComponent({
setup() {
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="{}"
>
<template #filter="{ $panel, column }">
<a-input
type="type"
v-for="(option, index) in column.filters"
:key="index"
v-model="option.data"
@input="$panel.changeOption($event, !!option.data, option)"
></a-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 },
],
};
},
});
License
MIT © 2019-present, Xu Liangzhan