Загрузка elsa vue - Загрузка исходного кода elsa vue

elsa vue

Другие категории

1.0.0

Скачать

Эльза

⚡ elsa (eleme simple admin) основана на element-ui и инкапсулирует el-form, el-table и другие компоненты и подходит для быстрой разработки проектов управления серверной частью.

Примеры использования см.: пример

Быстрый старт

 npm i elsa - vue - S

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa )

Особенность

еще-карта
- Поддерживает настройку основных и субтитров.
еще-таблица
- Настраиваемые столбцы списка
- Поддержка пейджингового контроля
- Поддерживает древовидное отображение данных и отложенную загрузку.
Эльза-форма
- Поддерживаемые компоненты формы
  - эл-вход
  - эль-радио
  - эль-флажок
  - эль-выбрать
  - el-загрузка
  - эль-ххх-выборщик
- Пользовательский макет
- Сброс контрольной суммы формы
- Разбор гнезда вложенных объектов
- Общая настройка формы отключена
- Советы по элементам формы
- Элементы формы: динамические/связанные
  - отключен/включен
  - показать/скрыть
  - Динамически изменять несколько опций

Эльза-таблица

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

Получить источник данных dataSource типа Array.
Настройте отображаемую информацию о столбце на основе свойств объекта в источнике данных.
Установить параметры разбиения на страницы

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " />

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

Атрибуты таблицы ElsaTable

параметр	иллюстрировать	тип
столбцы	Информация о столбце	Множество
источник данных	источник данных	Множество
нумерация страниц	Информация о страницах	Объект
...elProps	атрибут el-таблицы

ElsaTable.columns

параметр	иллюстрировать	тип	Необязательное значение
тип	выбор добавляет столбец поля выбора индекс добавляет столбец серийного номера развернуть Показать больше	Нить	выбор/индекс/развернуть
этикетка	заголовок	Нить
опора	поле синтаксического анализа	Нить
ширина	Соответствующая ширина столбца	Нить
зафиксированный	Независимо от того, зафиксирован ли столбец слева или справа, true означает фиксирование слева.	Строка/логическое значение	правда, слева, справа
форматтер	Форматирование данных	Функция (строка, столбец, значение ячейки)
показать-переполнение-подсказку	Показывать всплывающую подсказку, когда контент слишком длинный и скрыт	логическое значение

Более подробную информацию см. в разделе: столбец el-table.

ElsaTable.elProps

параметр	иллюстрировать	тип	Необязательное значение	значение по умолчанию
~~данные~~	Заменить источником данных
граница	Иметь ли вертикальные границы	логическое значение		ЛОЖЬ
размер	размер	Нить	средний/маленький/мини
соответствовать	Является ли ширина колонны самонесущей	логическое значение		истинный

Более подробную информацию см. в разделе: Атрибуты el-таблицы.

События ElsaTable

параметр	иллюстрировать	тип	Необязательное значение	значение по умолчанию
выбор-изменение	Это событие срабатывает при изменении выбора	Функция(выборы)

Подробнее см.: события el-table.

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

Эльза-форма

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

Определить модель модели данных формы
Настройте поле формы и определите макет (необязательно).

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form >

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

Атрибуты ElsaForm

параметр	иллюстрировать	тип	значение по умолчанию
конфигурация	Конфигурация элемента формы	Объект
модель	сформировать модель данных	Объект
макет	макет формы	Массив
неполноценный	Вся форма отключена	логическое значение	ЛОЖЬ
...elProps	Конфигурация элемента формы	Объект

ElsaForm.config

параметр	иллюстрировать	тип	Необязательное значение	значение по умолчанию
поле	Поля элементов формы, соответствующие атрибутам модели	Объект
поле.метка	имя	Нить
поле.elTag	Тег формы элемента	Нить	эл-вход/выбрать/радио/каскадер/выбор даты/выбор времени/загрузка
поле.elAttrs	Атрибуты элемента формы (см. соответствующий компонент elTag)	Объект
поле.elStyle	Стиль стиля элемента формы	Объект
поле.экстра	Подсказка	Нить
поле.extraIcon	Значок быстрого сообщения	Нить		el-icon-warning-outline
поле.правила	Правила проверки формы	Множество
поле.опции	Когда этот флажок установлен, select используется для отображения данных.	Множество
поле.видимо	Связь, вы можете управлять отображением и скрытием в зависимости от модели.	Логическое значение/Строка/Функция({модель})
поле.customRender	Шаблон отображается в правой части elTag.	Нить
поле.slotRender	Шаблон внутри elTag (например: контент при загрузке)	Нить

Подробнее см.: методы el-form-item.

ElsaForm.field.elAttrs

Пример некоторых специальных свойств

параметр	иллюстрировать	тип
неполноценный	Запрещать	Функция({модель})/ Логическое значение
isRemote	elTag — это ленивая загрузка el-select	логическое значение
удаленный метод	elTag — это ленивая загрузка el-select	Функция(сделано,{модель})/логическое значение
ленивый	elTag — это ленивая загрузка el-cascader	логическое значение
ленивая загрузка	elTag — это ленивая загрузка el-cascader	Функция(узел, разрешение, {готово})/логическое значение

ElsaForm.layout

параметр	иллюстрировать	тип	Необязательное значение
elTag	Тег формы элемента	Нить	el-строка/столбец
элАттрс	Атрибуты элемента формы (см. соответствующий компонент elTag)	Объект
дети	ребенок	Объект
поле	поля элемента формы	Нить

ЭльсаФорм.elProps

параметр	иллюстрировать	тип	Необязательное значение
ширина этикетки	Ширина метки поля формы	Нить
метка-суффикс	Суффикс для меток полей формы	Нить
размер	размер	Нить	средний/маленький/мини

Более подробную информацию см. в разделе: Атрибуты el-form.

Методы ЭльзыФормы

параметр	иллюстрировать	тип
подтвердить	Проверка данных формы	Функция (ошибка, модель)
сброс полей	Сбросить элемент формы	Функция (реквизит <Массив \| Строка>)
ОчиститьПодтвердить	Очистить результаты проверки	Функция (реквизит <Массив \| Строка>)