vue jsx table
1.0.0
Документ пример
Этот компонент основан на второй разработке таблицы элемента . Полем
Перед использованием вам нужно ввести Element-UI
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > Это необходимо для конфигурации таблицы столбцов и опций TableData.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Установите детей для Колумбона, чтобы отобразить заголовок пакета.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Установите вариант рендеринга для Колумба
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Вам нужно только установить тип: развернуть элемент конфигурации столбца.
{
type : 'expand' ,
slot : 'expand' ,
} , Просто установите Solt: '' Для элемента конфигурации столбца, а слот - это имя слота
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Просто установите renderheader для элемента конфигурации столбца, Renderheader-это нативная конфигурация элемента-UI (Официальная функция заголовка рендеринга не рекомендуется. Рекомендуется использовать слот !!!, Консоль будет вызвать, 囧), вы также можете использовать слот. Конфигурация слота была определена в декларации шаблона
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Вы также можете использовать функцию рендеринга для отображения компонента через слот Solt
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Все атрибуты таблицы реализованы через v-bind = "$ attrs", и добавляются дополнительные атрибуты таблицы:
| параметр | иллюстрировать | тип | значение по умолчанию |
|---|---|---|---|
| колонны | Столбец таблицы | Множество | [] |
| ColumnSkeyName | Ключ столбца, если вам нужно использовать событие смены фильтра, нужна идентификация атрибута, какое условие скрининга столбца (атрибуты таблицы-колонны) | нить | - |
| выровнять | Выравнивание | Нить | левый |
| ShowPagination | Показать ли контроль страниц | Логический | истинный |
| Текущая страница | Текущая страница текущего управления страницей | Число | 1 |
| PageSize | PageSize of Paging Control | Множество | [10, 20, 30, 50] |
| PageSize | PageSize контроля пейджинг | Множество | [] |
| макет | Макет контроля под пейджинг | Нить | 'Размеры, предварительный, пейджер, следующий, всего' |
| Общий | Всего контроля под пейджинг | Число | 0 |
| страниц | Стиль контроля страниц | Объект | - |
| ShowoverFlowTooltip | Подсказка отображается, когда контент слишком длинный. | Логический | истинный |
| ShowTablestting | Отображение настройки таблицы | Логический | ЛОЖЬ |
| Hidecolumns | Необходимо скрыть столбцы, названия меток, некоторые сцены должны отображаться в соответствии с некоторыми условиями | Множество | [] |
| CustomClass | Класс пользовательского стиля | Множество | ['vue-jsx-table-wrapper'] |
Все события таблицы реализованы через v-on = "$ слушателей", и дополнительные события таблицы добавляются:
| параметр | иллюстрировать | тип | значение по умолчанию |
|---|---|---|---|
| размер-китайцы | Page-Chinese, изменение текущего смены вызовет этот инцидент и увеличит его, чтобы облегчить изменения в пейджинге | Функция | 'Function ({pagesize: 10, currentPage: 1,}) {}' |
| размер-китайцы | Изменения PageSize будут вызывать | - | - |
| Текущий изменение | Изменения в текущей странице будут вызывать | - | - |
| параметр | иллюстрировать | тип | значение по умолчанию |
|---|---|---|---|
| пропиточный | Имя поля соответствующего содержимого столбца | нить | - |
| слот | Имя слота столбца (обратите внимание, что если вложенная форма, имя слота не может быть повторено, оценки слотов ({row, $ index}))) | нить | - |
| этикетка | Отображается заголовок | нить | - |
| ширина | Ширина соответствующего столбца | Число | - |
| ShowoverFlowTooltip | Когда контент слишком длинный, отображается подсказка | Логический | - |
| зафиксированный | Будет ли столбец фиксирован слева или вправо (верно, слева, справа), true указывает, что он зафиксирован слева | Строка, логический | - |
| оказывать | Функция рендеринга JSX | функция | Рендеринг (строка, столбец, $ index) |
| Тип | Выбор/Индекс/развернуть | нить | - |
| Renderheader | Top, название рендеринга лейбла заголовка | Функция (столбец, применение}), столбец - это элемент конфигурации, область применения - это область нативных компонентов. (Этот атрибут не является собственным параметром) | - |
| Cellredstar | Играется ли логотип Red Star до текста головы | Логический | ЛОЖЬ |
| сортируемый | Независимо от того, можно ли отсортировать соответствующий столбец, если установить на «пользовательский», это означает, что пользователь хочет отсортировать удаленно и необходимо контролировать событие смены сортировки таблицы | Boolean, String (True, False, 'Custom') | ЛОЖЬ |
| Формат | Используется для форматирования контента (исходные атрибуты элемента-UI) | Функция (ряд, Colorn, CellValue, Index) | - |
| Выбираемый | Только столбец типа = выбор действителен, а тип - это функция. | Функция (ряд, индекс) | - |
| ShowHeaderTooltip | Перемещается ли мышь в голову, чтобы показать копию копии | Логический | - |
| Headertooltiptext | Отображать информационный контент копирайтинг | Нить | - |
