1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/x-extends-vxe-table-plugin-antd

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

vxe-table-plugin-antd

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)

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 {

Примечание: в тексте запроса есть ссылки на сторонние ресурсы, которые не были переведены. ## Демо ячейки

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

Вы можете оставить комментарий после Вход в систему

Введение

На основе таблицы vxe-table разработан плагин для адаптации, который позволяет обеспечить совместимость с библиотекой компонентов ant-design-vue. Развернуть Свернуть
MIT
Отмена

Обновления (4)

все

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/x-extends-vxe-table-plugin-antd.git
git@api.gitlife.ru:oschina-mirror/x-extends-vxe-table-plugin-antd.git
oschina-mirror
x-extends-vxe-table-plugin-antd
x-extends-vxe-table-plugin-antd
master