2.9.14 • Published 1 year ago

vxe-table-rotd v2.9.14

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

vxe-table

vxe-table

各位,这个包是我修改一些bug之后, 用来适应我这边项目的。当前版本对应的vxe官网的版本是2.19.13,,请大家去下正版的吧,支持正版

有问题QQ联系:1533631317

这个旧版的,如何打包呢,首先:用女模(NVM)把版本降低到12.14.0, 不然打包可能会报node-sass的错等等,然后执行npm run lib:pack(这个命令最后会报错,没关系),

接下来执行npm run lib:modules, 不要直接执行npm run lib

修改了contextMenu的一个BUG, 鼠标右键点击没有数据的一行竟然会报错的BUG

简体中文 | English

gitee star npm version npm build npm downloads gzip size: JS gzip size: CSS
issues issues closed pull requests pull requests closed npm license

A vue based PC form component, support add, delete, change, virtual scroll, lazy load, shortcut menu, data validation, tree structure, print export, form rendering, data paging, virtual list, modal window, custom template, renderer, flexible configuration items, extension interface, etc...

  • Design concept

    • Efficient and concise API design for modern browsers
    • Modular tables, on-demand loading, extended interfaces
    • Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time
  • Donation

    • v1.0 100% Based on vue2.6+, it supports all mainstream browsers and realizes all practical functions of tables
    • v2.0  100% Based on vue2.6+, it supports all mainstream browsers with both functions and performance
    • v3.0   60% Based on vue2.6+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved
    • v4.0   0% Based on vue3+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved

👉 If you have a better suggestion, optimization point or Bug, please feel free to ask Issues

Browser Support

IEEdgeChromeFirefoxOperaSafari
11+ ✔Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔

Features

  • Basic table
  • Grid
  • Striped
  • Table with border
  • Cell style
  • Column resizable
  • Maximum table height
  • Resize height and width
  • Fixed column
  • Grouping table header
  • Table footer
  • Highlight row and column
  • Table sequence
  • Radio
  • Checkbox
  • Select
  • Switch
  • Sorting
  • Filter
  • Rowspan and colspan
  • Import
  • Export
  • Print
  • Show/Hide column
  • Loading
  • Formatted cell
  • Slot/template
  • Context menu
  • Expandable row
  • Pager
  • Form
  • Toolbar
  • Pulldown
  • List
  • Editable CRUD
  • Tree table
  • Validate
  • Data Proxy
  • Keyboard navigation
  • Modal
  • Renderer
  • Virtual Scroller

Modules

  • Core
    • TableMethodsBodyCellstyle
  • Modules
    • Icon
    • Headerstyle
    • Footerstyle
    • FilterPanelstyle
    • Tooltipstyle
    • MenuPanelstyle
    • Exportstyle
    • Keyboard
  • Component
    • Gridstyle
    • Column
    • Liststyle
    • FormFormItemstyle
    • Pagerstyle
    • Toolbarstyle
    • Checkboxstyle
    • Radio style
    • Inputstyle
    • SelectOptgroupOptionstyle
    • Switch style
    • Modalstyle
    • Buttonstyle
    • Pulldownstyle
  • Plugins
    • Strengthen
      • vxe-table-plugin-export-pdf
      • vxe-table-plugin-export-xlsx
      • vxe-table-plugin-menus
    • Adapter
      • vxe-table-plugin-elementstyle
      • vxe-table-plugin-iviewstyle
      • vxe-table-plugin-antdstyle

Installing

Dependent: vue 2.6+, xe-utils 2.4+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

npm

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

CDN

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- Script -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>
<!-- It is recommended that users introduced by CDN lock the version on the link address to avoid the impact of incompatible updates -->

Example

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

Docs

💡 User guide
👉 View example
👉 View API

Donation

If the open source project is very helpful to you, you can buy the author a cup of coffee.
Feel free to leave a comment or ask Issues

Because maintaining an open source project takes a lot of effort and time, if you are using the project, your donation will help keep the project going.
👉 Donation method💰

License

MIT License, 2019-present, Xu Liangzhan

2.9.14

1 year ago