vue element crud

К сожалению, этот репозиторий больше не поддерживается, используйте его на свой страх и риск.

Примечание. В этом проекте могут возникнуть некоторые проблемы с реализацией компонентов, а со временем могут также обновляться версии фреймворка Vue и библиотеки элементов пользовательского интерфейса, что может не подходить для настоящего и будущего.

vue-element-crud

Обернутый компонент vue CRUD, основанный на известных компонентах пользовательского интерфейса vue — element-ui.

Компонент добавления, удаления, изменения и проверки на основе компонентов element-ui .

Вот простая демонстрация.

Вы можете прочитать примеры и файл исходного кода Crud.vue в проекте, чтобы понять особенности использования компонента.

Местное развитие

Вы можете загрузить или клонировать этот репозиторий, если он вам нравится. Затем вы можете запускать сценарии npm.

$ npm install
$ npm run dev

Откройте новый терминал,

$ npm run build:watch

Использование

Вы можете использовать vue-element-crud как плагин vue или как компонент vue.

Если вы хотите рассматривать его как компонент, вы можете импортировать CRUD как компоненты.

Как компонент

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

В противном случае вы можете рассматривать его как плагин.

Как плагин

Шаг 1, инициализация проекта

Возможно, вам придется запустить проект vue или использовать существующий, чтобы продолжить, поскольку для element-ui требуется vue-loader, Babel-loader или css-loader.

$ vue init webpack < project-name > 

Шаг 2, установка

Этот компонент зависит от element-ui, и element-ui будет автоматически установлен при установке vue-element-crud , поэтому вам не нужно дополнительно устанавливать element-ui .

$ npm install -S vue-element-crud

Шаг 3, использование vue

Добавьте эти строки ниже в свой main.js

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

Шаг 4, обратитесь к примерам

Вы можете прочитать документацию или примеры, чтобы узнать, как реализовать реквизиты и методы этого vue-element-crud.

API

реквизит	тип	необходимый	по умолчанию	описание
данные	Множество	истинный	---	Массив табличных данных
форма	Объект	истинный	---	Объект формы для хранения переменных элемента формы
поля	Объект	истинный	---	Объект, описывающий структуру элементов формы, например: { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
правила	Объект	ЛОЖЬ	---	Объект, описывающий правила элементов формы, например: { name: [{ required: true, message: 'name is required.' }] }
размер	Нить	ЛОЖЬ	'large'	Установите размер диалогового окна 'full' , « 'large' small » или «опущенное».
ширина метки	Нить	ЛОЖЬ	'100px'	Ширина этикетки формы и таблицы.
в соответствии	логическое значение	ЛОЖЬ	false	Определите, являются ли элементы формы встроенными или нет.
стол	Объект	ЛОЖЬ	---	Если структура таблицы не соответствует структуре формы, вы можете указать ее, например, { name: 'name' }
действия	Множество	ЛОЖЬ	['create', 'destroy', 'update']	Жестокие действия.
загрузка	логическое значение	ЛОЖЬ	false	CRUD находится в состоянии XHR. Кнопка «Отправить» отключена, если это правда.
выделить текущую строку	логическое значение	ЛОЖЬ	false	Выделить текущую строку таблицы или нет.
строкастиле	Функция	ЛОЖЬ	---	Функция стиля строки таблицы Function(row, index)

события	описание
открыть	Событие открытия диалога установите для editing значение true, чтобы отобразить диалог.
закрывать	Событие закрытия диалога установите для editing значение false, чтобы закрыть диалог.
создавать	Событие создания формы. Вам необходимо назначить модель формы form .
обновлять	Событие обновления формы (row, index) передаваемое обработчику. Вам необходимо назначить строку form .
разрушать	событие уничтожения строки таблицы (row, index) , передаваемое обработчику.
представлять на рассмотрение	Событие отправки формы (status, closeDialog) 1 closeDialog 0 .
расширять	Событие расширения таблицы (row, expanded) передается обработчику. См. события таблицы element-ui.
щелчок по строке	Событие щелчка строки таблицы (row, event, column) , передаваемое обработчику. См. события таблицы element-ui.
строка-dblclick	Событие dblclick строки таблицы (row, event) , передаваемое обработчику. См. события таблицы element-ui.

слоты	описание
индекс	Индексный слот строки таблицы См. слоты таблицы element-ui.
расширять	Слот расширения таблицы См. слоты таблицы element-ui.
добавить в начало	Слот для добавления таблицы.
по умолчанию	Слот для добавления таблицы.
добавить	Сформировать слот аддона.

Ваш шаблон может выглядеть так.

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

Вот простой миксин, который может помочь вам его загрузить. Просто импортируйте Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

Способствовать

Если у вас есть какие-то идеи по поводу этого компонента, пожалуйста, дайте нам знать. Вы можете создать новый выпуск, чтобы сделать его лучше.