@qdzhangmetal/nvx-table
v0.0.2
Published
table for Haier
Downloads
2
Maintainers
Readme
nvx-table
Browser Support
| | | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Features
- [x] Basic table
- [x] Grid
- [x] Striped
- [x] Table with border
- [x] Cell style
- [x] Column resizing
- [x] Maximum table height
- [x] Resize height & width
- [x] Fixed column
- [x] Grouping table header
- [x] Table footer
- [x] Highlight row & column
- [x] Table sequence
- [x] Radio
- [x] Checkbox
- [x] Select
- [x] Switch
- [x] Sorting
- [x] Multi field sorting
- [x] Filter
- [x] Merged cells
- [x] Merged footer items
- [x] Import/Export/Print
- [x] Show/Hide column
- [x] Loading
- [x] Formatted cell
- [x] Slot - template
- [x] Context menu
- [x] Detail - Expandable row
- [x] Pager
- [x] Form
- [x] Toolbar
- [x] Pulldown
- [x] Virtual list
- [x] Virtual tree
- [x] Editable CRUD
- [x] Validate
- [x] Data Proxy
- [x] Keyboard navigation
- [x] Modal
- [x] VxeGlobalRenderer
- [x] Virtual scroller
- [x] Virtual merger
- [x] (pro) Cell area selection
- [x] (pro) Cell copy & paste
- [x] (pro) Cell find and replace
Installing
Version: vue 3.x, Dependent: n-table-utils
npm install n-table-utils vxe-table@next
npm
import { createApp } from 'vue'
import 'n-table-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')
Example
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const tableData = ref([
{ 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' }
])
return {
tableData
}
}
})
</script>
Run the project
Install dependencies
npm install
Start local debugging
npm run serve
Compile packaging, generated compiled directory: es,lib
npm run lib