БЕСПЛАТНЫЕ СРЕДЫ СЕРИАЛЬНЫЕ СЕРИИ: Сборка таблицы Elementui на основе второго пакета

Vue.js

vue-free-table

На основании второго пакета компонентов Elementui таблицы практически все функции оригинальной таблицы

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

Использование документации

ДЕМО предварительный просмотр

характеристика

  • Вторичная инкапсуляция на основе таблицы element-ui для уменьшения объема кода
  • Наследовать параметры и события табличного компонента element-ui
  • Поддержка рендеринга
  • слот поддержки слот
  • Введение компонента поддержки
  • Данные дерева поддержки
  • Поддержка функции пейджинга

Документация

Атрибуты иллюстрировать Типы По умолчанию
data столdataАтрибуты Array []
column Используется для управления визуализацией столбцов таблицы. Array []
columns-props используется для определения всехcolumnОбщественная собственность Object
pagination Отображать ли компонент пейджинга, см. подробностиpagination配置столбец Boolean false

Он просто инкапсулирует слой в таблице элементов. Реквизиты и мониторинг событий, а также настройки, изначально установленные в таблице, могут быть напрямую привязаны к компоненту. Конкретную конфигурацию см.Element TabelДокументация

конфигурация столбцастолбец используется для управления поведением столбца таблицы, например:

const column = [
  { label: '日期', prop: 'date', width: 100 },
  { label: '姓名', prop: 'name' },
  { label: '邮编', prop: 'zip' },
  {
    label: '地址',
    prop: 'address',
    render: (h, scope) => {
      return (<el-tag>{scope.row.address}<el-tag>)
    }
  },
  {
    label: '组件',
    prop: 'cmp',
    component: EditBtn,
    listeners: {
      'row-edit'(row) {
        console.log('row-edit', row)
      }
    }
  }
]

конфигурация столбцов-реквизитовcolumns-props используется для настройки свойства реквизита по умолчанию для каждого столбца столбцов,

const columnsProps ={
  align: 'left',
  minWidth: 120
}

конфигурация пагинацииРазбивка на страницы используется для управления компонентом отображения разбиения на страницы. Компонент разбивки на страницы — это вторичная инкапсуляция, которая наследует разбиение на страницы. Источник находится в проекте с открытым исходным кодом.vue-элемент-админ Компоненты подкачки в библиотеке компонентов

параметр иллюстрировать Типы По умолчанию
total общее количество записей Number /
page Текущее количество страниц.syncмодификатор Number 1
limit Отображение количества элементов на странице, поддержка.syncмодификатор Number 20
page-sizes Настройки параметров для количества селекторов, отображаемых на странице Number[] [10, 20, 30, 50]
hidden скрывать ли Boolean false
auto-scroll Следует ли автоматически прокручивать вверх после пейджинга Boolean true

Он также поддерживает другие свойства, поддерживаемые разбиением на страницы элемента. Подробнее см.Документация

Пример

<template>
  <free-table border stripe :data="data" :column="column"></free-table>
</template>

<script>
import FreeTable from '@/components/FreeTable'

export default {
  components: {
    FreeTable
  },
  data() {
    return {
      column: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '省份', prop: 'province' },
        { label: '市区', prop: 'city' },
        { label: '地址', prop: 'address' }
      ],
      data: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
</script>

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

Github

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

https://github.com/vincentSea/vue-free-table
Категории