Я давно не обновлял статью, в основном потому, что был занят изучением новых вещей и забыл поделиться ею. Мне очень стыдно.
Послушайте, я опубликовал статью посреди ночи, поделившись виджетом Vue под названием Bootpage, которую я написал сам.
Если вы не понимаете vue.js, вы можете перейти к моей предыдущей статье «Краткий разговор о vue.js», чтобы узнать об этом.
Введение в компоненты загрузки
На самом деле, это не высококачественный компонент. Напротив, это на самом деле просто простой компонент подвески. Это в основном потому, что мне нужен компонент подкрепления таблицы в моем недавнем проекте. Компоненты ли библиотеки библиотеки официальных компонентов компонентов слишком сильны или не подходят для меня, поэтому я сам написал с этим. Может быть, кто -то вроде меня нуждается в таком простой компоненте пейджинг, чтобы реализовать простые функции пейджинга. Я поделюсь этим здесь, и каждый заполнит ямы.
Если вам нужны высококачественные компоненты, вы можете перейти в официальную библиотеку компонентов VUE: https://github.com/vuejs/awesome-vue#libraries-Плагинс
Bootpage - это компонент подборки таблицы, который поддерживает статические данные и данные сервера. Он поддерживает настройку количества строк, отображаемых на каждой странице, и количество отображаемых страниц. Стиль основан на начальной загрузке, точно так же:
Онлайн демонстрация: https: //luozhihao.github.io/b ...
Как использовать
В файле компонента .vue мы пишем такой шаблон, как этот код HTML:
<table> <thead> <tr> <th> id </th> <Th> name </th> <Th> Content </th> <Th> замечание </th> </tr> </thead> <tbody> <ttr v-for = "data in tablelist"> <td v-text = "data.num"> </td> <td v-text = ". v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <button v-on: click = "replesh"> refresh </button> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> : page-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot> </table>
В теге <boot-page> async относится ли получить данные со стороны сервера, false нет; Данные представляют собой статический массив табличных данных; Объектив представляет собой массив рядов, отображаемых на страницу; Page-Len-это количество страниц, которые можно отобразить;
Код JavaScript, который использует статические данные, то есть содержимое в теге сценария следующее:
<Script> импорт загрузки из './components/bootpage.vue' export default {data () {return {lenarr: [10, 50, 100], // Отображение длины на Pagelen: 5, // Отображение количества страниц, которые можно отобразить: [{num: 1, Автор: 'luozh', Contents: 'Bootpage Servage Servate, что Servate Popage Popage Popage Popage Pogone и S. замечание: 'DSDS'}, {num: 2, Author: 'Luozh', Содержание: «Поддержка для регулировки количества строк, отображаемых на страницу, и количество отображаемых страниц. Стиль основан на Bootstrap ', замечание:' DSDS '}, {num: 3, Author:' Luozh ', Содержание: «<sool-page> Tag Async Относится к тому, можно ли получать данные со стороны сервера, false is is», замечание: «dsds»}, {num: 4, автор: «luozh», «Содержимое:». {num: 5, автор: 'luozh', Содержание: 'Lens-это массив строк, отображаемых на страницу ", замечание:' DSDS '}, {num: 6, автор:' luozh ', Содержание:' Page-len-это количество страниц, которые можно отобразить", замечание: 'dsds'}, {num: 7, авторы: 'luozh. {data: [], page_num: 6}, где данные представляют собой табличные данные, а page_num - это общее количество страниц », замечание:« DSD »}, {num: 8, автор: 'luozh', содержимое: 'может называть это. ДАННЫЕ: [] // Пост-разбиваемые данные, возвращаемые компонентом странификации}}, компоненты: {bootpage}, события: {// Данные таблицы, возвращаемые компонентом лиц '(data) {this.tablelist = data}}} </script>Как правило, мы редко используем статические табличные данные, и данные большинства приложений получаются со стороны сервера, поэтому вот метод получения данных страниц сервера:
Компонент HTML, который использует данные сервера, выглядит следующим образом:
<boot-page v-ref: page: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
где URL является адресом запроса сервера; PARAM - это объект параметра, который необходимо отправлять на сервер;
Код с использованием данных сервера JavaScript заключается в следующем:
<Script> import Bootpage из './components/bootpage.vue' export default {data () {return {lenarr: [10, 50, 100], // Показ длины на страницу настройка Pagelen: 5, // Номер страниц, которые можно отобразить PARAMEST: отправлено обратным компонентом лиц}}, методы: {refresh () {this. $ refs.page.refresh () // Функция обновления таблицы представлена здесь}}, компоненты: {bootpage}, события: {// Данные таблицы возвращаются с помощью компонента страдания (данные, возвращаемые данные, данные). 'rebresh' () {this.refresh ()}}}} </script>Примечание. В дополнение к содержимому массива, передаваемому в таблицу компонентов, серверу также требуется имя ключа общего количества страниц с именем page_num
Параметры, с которыми поступает компонент на сервер:
{
Active: 1, // текущий номер страницы
Длина: 5 // количество отображаемого на страницу
}
Параметры возврата сервера должны быть:
{
Данные: [], // табличные данные
page_num: 5 // общее количество страниц
}
Компонентный исходный код
Что касается реализации страниц, я не буду отображать исходный код здесь. Я загрузил весь исходный код в свой GitHub, и адрес: https://github.com/luozhihao/bootpage
Позвольте мне напомнить вам заранее: потому что мне потребовалось несколько часов, чтобы вытащить этот компонент, я, должно быть, был неадекватен в форматах письма и спецификациях компонентов VUE и не был полностью независимым, поэтому я сознательно заполняю яму. Я поделюсь только здесь.
Конечно, вы также можете изменить код компонента по желанию в соответствии с использованием вашего проекта. В конце концов, довольно сложно внедрить большие и полные компоненты пейджинга.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.