В соответствии с бизнес-потребностями компании я упаковываю компоненты следующим образом.

предисловие

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

Затем начните инкапсулировать компоненты, чтобы одинаковые функциональные требования можно было управлять и настраивать единообразно.

необходимость

Когда я получил требование, я сначала посмотрелelement-uiСоответствуют ли компоненты element-ui моим бизнес-потребностям (ps: можно преобразовать на основе компонента elemnt-ui), но позже я обнаружил, что табличный компонент element-ui не может удовлетворить мои бизнес-потребности. время, через превращениеelement-uiКомпоненты также очень громоздки. В конце концов, я решил сам инкапсулировать компонент многофункционального стола. …

Функциональные требования следующие:

1. Отрисовку дерева табличных данных и одного и того же уровня под одним и тем же родителем можно перетаскивать, но нельзя перетаскивать разные уровни.

2. Строкой таблицы можно управлять (ps: например, редактировать, удалять, просматривать подробности)

3. Верх таблицы работоспособен (пс: развернуть, отсортировать)

4. Конец таблицы можно разбить на страницы

5. Таблица может быть выбрана несколькими (ps: таблица с флажком)

Многофункциональный компонент формы

Установить плагин

npm install element-ui sortablejs -S

В проекте я используюsortablejsРеализуйте перетаскивание и используйтеelemnt-uiКомпонент пейджинга реализует функцию пейджинга.

Как визуализировать древовидные данные

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

Как показано ниже, назвав компонент recursiveRow и используя компонент в шаблоне компонента. Ну вот и первый шаг рекурсивных компонентов...

Я разрабатываю каждую строку как компонент, и если у данных строки есть дочерние элементы, компонент recursiveRow отображается один раз. Здесь реализовано рекурсивное условие. Следующим шагом является завершение кодирования каждой строки данных. Как завершить написание кода каждой строки данных будет добавлено позже.Далее мы сначала придем к таблице конфигурации для этого компонента.

Дизайн элемента конфигурации заголовка

Этот компонент реализует унифицированное управление компонентами посредством конфигурации заголовка.JSONбыть реализованным.

JSONпроходит через полеname,props,before,images,actions,attr,select,tree,name,props

Базовая конфигурация

Базовая конфигурация стола — через полеnameиpropsразрабатывать.

Такая базовая конфигурация отображает страницу следующим образом:

Другая конфигурация

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

Конфигурация заголовка операции строки выполняется черезactionsКонфигурация выполняется, и событие щелчка может быть передано, и данные каждой строки, индекс измененной строки и объект события могут быть получены путем выполнения события. Его свойстваattrнастроить.

При необходимости флажок можно настроить с помощьюselect, установите в поле значениеtrue. по конфигурацииattrДля настройки свойств, конечно, если вы их не передаете, у вас также могут быть значения по умолчанию. Как получить значение, соответствующее чеку в каждой строке? Оставьте вопрос, мы поговорим об этом позже.

Если вы определили, какое поле является шаблоном, который необходимо отобразить в виде дерева, вы можете настроитьtree, установите в поле значениеtrueВы можете, настроивbeforeДанные каждой сетки могут быть специально отображены.

Когда проектирование элемента конфигурации заголовка будет завершено, следующим вопросом будет рассмотрение того, как передать атрибуты и как спроектировать каждую строку кода, упомянутую выше.

Ядро здесь черезv-bind, когда v-bind не принимает параметров, он привязывает все свойства всего объекта к текущему элементу. а такжеv-onПривязывайте события к элементам одно за другим. используемый компонент$attrsНабор свойств объекта и

$listenersНабор событий объекта для передачи свойств между классами и отслеживания передачи событий. Передайте свойства и события, связанные с табличным компонентом, рекурсивному компоненту через класс, чтобы рекурсивный компонент получил свойства и события.

Пользовательский рекурсивный компонент:

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

набор функций

Функциональный анализ Описание

• В процессе реализации бизнес-требований, поскольку я проектировал рекурсивные компоненты, каждый рекурсивный компонент является областью действия. Большинство людей путают с рекурсией, которая представляет собой просто вложенные области видимости, но это отдельные сущности. (пс: тут я тоже наступил на яму)

• Только что упоминалось выше, как получить значение каждой проверки. по привязке к таблицеselect-changeсобытие, которое каждый раз возвращает проверяемое значение. Идея его реализации состоит в том, чтобы сохранить значение каждой проверки и отфильтровать значение каждого отмены выбора.Подробнее о процессе реализации вы можете просмотреть исходный код.

• Если говорить о верхней части таблицы, то я буду говорить о хвосте вместе. На макете верх и низ проходят через именованные слотыslotбыть реализованным. Таким образом, вы можете настроить операцию вверху и пейджинг в конце.

• Таблицу можно расширить, выставив функцию внутри таблицы.openAllTreeможет быть достигнуто связываниемrefПолучить эту функцию извне.openAllTreeИдея его реализации состоит в том, чтобы изменить данные, позволить данным управлять представлением; инкапсулировать функцию в рекурсивном компоненте для обновления внутренних свойств текущей области видимости и циклически выполнять функцию каждого рекурсивного компонента в табличном компоненте. . Если вы хотите узнать конкретный процесс реализации, вы можете просмотреть исходный код.

• Таблица сортируется по свойствам привязкиisSortдля включения и выключения сортировки. Привязать по одному к каждому рекурсивному компонентуrefатрибут, а затем перетаскивание на одном уровне достигается с помощью нового экземпляра Sortable (один и тот же уровень здесь — это узел того же уровня, и один и тот же родительский узел можно перетаскивать друг к другу). Идея его реализации заключается в том, чтобы связатьrefСвойство может получить поток данных текущего компонента (ps: поскольку каждый компонент имеет свою область действия, он независим), а затем управлять представлением данных. Также обратите внимание здесьisSortДанные изменяются, и данные таблицы обновляются после завершения перетаскивания, поэтому данные таблицы обновляются путем получения обратного вызова атрибута (ps: идея функции обратного вызова). Внутри через функциюhandlerSortРеализовано, если вы хотите узнать о нем больше, вы можете просмотреть исходный код.

• Операция удаления текущей строки таблицы выполняется с помощьюtableФункции, представленные внутри компонентаhandlerDepDelосуществленный. Здесь я считаю, что данные являются односторонним потоком, поэтому реализую древовидное удаление данных с передачей параметров. (пс: Параметр - самый оригинальный список данных и id текущей строки) лично я считаю, что после удаления данных текущей строки нет необходимости вызывать интерфейс для получения общего списка данных только вызовом удаленного интерфейса . Когда вы войдете на страницу в следующий раз, вы можете снова вызвать интерфейс данных общего списка.

• добавилopenАтрибут, этот атрибут указывает, открывать ли данные дерева, как только вы входите на страницу, этот атрибут по умолчанию имеет значениеfalseто есть не открыт.

• Наконец, удовлетворив потребности компании, я написал функцию, которая может напрямую изменять данные в таблице после нажатия кнопки «Редактировать». В основном внутренняя функция, предоставляемая табличным компонентом.handlerEdit. Идея состоит в том, чтобы добавить поля для изменения строкcomponentнастроитьHTML标签и данные для этого поля измененной строки. Конкретная реализация может просматривать исходный код.

• Оптимизирована загрузка таблицы

использовать таблицу

пользовательская таблица компонентов

Как показано ниже:

Стиль можно изменить самостоятельно ~

исходный код

Адрес исходного кода компонента можно посмотреть:Адрес источника

постскриптум

Чтобы удовлетворить потребности копания, я добавил требование, чтобы все дочерние элементы были выбраны после выбора родителя. Основная идея, используемая здесь, — это представление обновления данных и механизм потока событий для получения данных.

• Привязав табличный компонентtree-changeСобытие используется для получения данных после текущего выбора родителя.

инструкция

Некоторые мелкие проблемы в предыдущем редактировании также были исправлены на этот раз.

Суммировать

Многие могут подумать, почему так много библиотек компонентов инкапсулируют компоненты сами по себе, так ли это необходимо? На самом деле, анализируя это требование, я тоже пытался найти ресурсы, но обнаружил, что это в основном та же функция перетаскивания, что и папка... Поэтому я решил инкапсулировать ее сам.

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

Наконец, если это будет полезно всем копающим друзьям, я надеюсь наградить вас звездой~ (ps: не скупитесь)