vue-element-adminНе нужно много говорить о его богатых подключаемых модулях и элегантных решениях. Однако при разработке средних и конечных продуктов корпоративного уровня наиболее распространенными потребностями, с которыми мы сталкиваемся, являются страницы списков и страницы с подробностями.vue-element-adminРешение заключается в непосредственном использованииelement-uiизel-table/el-formСпрос выполнен.Поскольку страница списка и страница сведений имеют много требований, они похожи или даже одинаковы., исходя из этой предпосылки, я рассматриваю, может ли она основываться наvue-element-adminКак насчет создания более эффективного среднего и внутреннего решения, поэтому у нас естьvue-srm-admin.Исходный код проекта, отображение кейса и исходный код должны быть известны в конце статьи, пожалуйста, проверьте
vue-srm-adminЧто вы наделали
pageMixin: Интеграция функции страницы списка
Следите за номером страницы и количеством записей на странице.При изменении номера страницы/количества записей на странице автоматически инициируется запрос на получение соответствующего источника данных.
Отфильтруйте критерии поиска, чтобы автоматически отфильтровать недопустимые свойства.
Отметьте запрос в процессе и статус завершения запроса.
Определите, нужно ли обновлять текущий список.Если это необходимо, выполните автоматическое обновление.
УвеличиватьmixinHandleItemметод, когда вам нужно манипулировать данными списка, используйте этот метод для упрощения операций с данными и действий обратного вызова (при необходимости).
представлятьSrmDialogCheckКомпонент, если вам нужно подтвердить перед операцией с данными, вы можете заполнить запрос на подтверждение для одного или нескольких данных, которые необходимо обработать.
detailMixin: интеграция функции страницы сведений
согласно сidУстановите суффикс заголовка текущей страницы:
Пользовательский суффикс заголовка:
goListWithRefreshМетод: отметьте страницу, которую нужно обновить, и оцените, нужно ли возвращаться немедленно, по параметрам.
SrmTable: Настраиваемый табличный компонент
Введение:SrmTableОтображаемый с данными списка на странице списка, он основан на конфигурации для отображения необходимых данных. Благодаря таким функциям, как настраиваемый слот, рендеринг, форматирование и т. д., он имеет чрезвычайно широкие возможности настройки в соответствии с предпосылкой быстрой разработки. Кроме того, он может экспортировать файлы Excel на основе столбцов отображения таблицы без каких-либо дополнительных операций.
Attributes
параметр
иллюстрировать
Типы
По умолчанию
sourceData
отображаемые данные
array
Необходимый
total
общее количество записей
number
Необходимый
columns
Поля, которые необходимо отобразить (см. демонстрацию кода ниже)
array
Необходимый
loading
Это загружается
boolean
false
selectVisible
Выбирать ли строки
boolean
true
pageRequest
Номер страницы и количество записей на странице
object
{page: 1,pageSize: 10}
exportVisible
Можно ли экспортировать
boolean
true
deleteVisible
Можно ли удалить массово
boolean
true
exportName
Имя экспортируемого файла по умолчанию
string
''
pageSizes
Настройки параметров для количества селекторов, отображаемых на странице
number[]
[]
Events
имя метода
иллюстрировать
параметр
selectionChange
Это событие запускается при изменении выбора
selection
handleBatchDelete
Нажатие на пакетное удаление вызовет событие
selection
changePage
Это событие запускается при переключении номера страницы
page
changeSize
Это событие запускается при переключении количества элементов на странице.
pagesize
Slot
name
иллюстрировать
buttons
Область над столом (обычно используется для отображения кнопок)
SrmFormСоздавайте формы на основе конфигурации, которые могут быстро выполнять такие функции, как редактирование страниц сведений и фильтрация страниц списка.
Attributes
параметр
иллюстрировать
Типы
По умолчанию
v-model
объект данных формы
object
Необходимый
formName
форма имя объекта данных
string
Необходимый
formItems
Элементы поля формы (см. демонстрацию кода ниже)
array
Необходимый
inline
Встроенный режим формы
boolean
false
submitMsg
Отправить текст кнопки (кнопка скрыта, если значение равно false)
string | boolean
представить
resetMsg
Сбросить текст кнопки (скрыть кнопку, если значение равно false)
string | boolean
сброс настроек
labelWitdh
Ширина метки поля формы
string
auto
size
Используется для управления размером компонентов в форме
string
small
showBack
Показывать ли кнопку «Назад»
boolean
true
gutter
Интервал сетки (недействительно, если значение inline равно true)
number
24
btnCol
Макет области кнопки (недействительно, если значение inline равно true)
string
24
Events
имя метода
иллюстрировать
параметр
submit
Нажатие кнопки «Отправить» вызовет событие
без
after-reset
Нажмите кнопку «Сброс», чтобы вызвать событие.
без
Slot
name
иллюстрировать
buttons
Область под формой (обычно используется для отображения кнопок)
vue-srm-adminФормы и формы сильно инкапсулированы и широко используютсяmixin, что значительно повысило эффективность и качество моей разработки системы фонового управления компании. Я верю, что это поможет и вам. Поехали!