vxe-table-plugin-antd — это плагин для таблицы на основе vxe-table, который позволяет использовать компоненты библиотеки ant-design-vue.
Плагин совместим с версией vxe-table 4. Если вы используете версию vxe-table 4.7+, рекомендуется использовать более мощный адаптер @vxe-ui/plugin-render-antd, который полностью совместим с кодом.
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next
// ...
import VXETable from 'vxe-table'
import VXETablePluginAntd from 'vxe-table-plugin-antd'
import 'vxe-table-plugin-antd/dist/style.css'
// ...
VXETable.use(VXETablePluginAntd)
Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
---|---|---|---|---|
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 | — | — |
Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
---|---|---|---|---|
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 | — | — |
Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
---|---|---|---|---|
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 | — | — |
Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
---|---|---|---|---|
name | Поддерживаемый компонент рендеринга | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate, ARadio, ACheckbox, AButton, AButtons | — |
props | Дополнительные свойства компонента рендеринга, параметры см. в свойствах Component props | Object | — | {} |
options | Действует только для name=ASelect, список опций для компонента выбора | Array | — | [] |
optionProps | Действует только для name=ASelect, конфигурация свойств параметров для опций компонента выбора | Object | { |
Примечание: в тексте запроса есть ссылки на сторонние ресурсы, которые не были переведены. ## Демо ячейки
<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:value="row.name"></a-input>
</template>
</vxe-column>
<vxe-column field="age" title="Age" :edit-render="{}">
<template #edit="{ row }">
<a-input-number v-model:value="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:value="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 }
]
}
}
})
<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:value="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 }
]
}
}
})
MIT © 2019-present, Xu Liangzhan
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )