vue free table

vue free stable

На основе второй упаковки таблицы пользовательского интерфейса элементов почти поддерживает все функции исходной таблицы

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

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

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

• На основе таблицы Element-UI выполняется вторая упаковка, чтобы уменьшить количество кода
• Параметры и события, которые наследуют компонент таблицы элемента-UI
• Поддержка рендеринга
• Слот поддержки слота
• Введение компонента поддержки
• Данные дерева поддержки
• Поддержка функции пейджинга

документ

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

Это просто слой инкапсуляции в таблице элементов.

Columbal Configuration Column используется для управления поведением столбца формы.

 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 настроен с помощью Columns-Props для настройки атрибута репута по умолчанию каждого столбца столбцов,

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

КОНФИГАНИЧЕСКАЯ ПЕРЕДЕЛЕНИЯ КОНФИГАНИЧЕСКИЙ ПЕРЕСМОТРЕДА Используется для управления отображаемым компонентом лиц.

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

Он также поддерживает поддержку El-Pagination другого элемента. Смотрите документ для подробностей

Образцовый

 < 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>

Строить команды

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint