【vxe-table】表格库
vxe-table 介绍
⼀个基于vue的PC端表格组件库，⽀持增删改查、虚拟滚动、懒加载、表单校验、树形结构、打印导出、表单渲染、数据分页等v3.0 基于 vue2.6+，⽀持现代浏览器并兼容IE11
v4.0 基于 vue3.0+, 只⽀持现代浏览器，不⽀持IE
仓库、⽰例、⽂档⼊⼝
安装及配置
# 全局安装依赖 xe-utils vue 2.6x
npm install xe-utils@3 vxe-table@3
# 引⼊及安装插件库
import Vue from 'vue'
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
// 把XEUTils绑定到this中，⽅便在组件中通过 this 访问使⽤
Vue.prototype.$Utils = XEUtils
基础表格 vxe-table
<template>
<vxe-table
stripe
highlight-current-row
highlight-hover-row
:
data="tableData"
>
<vxe-table-column type="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="age" title="Age"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从⼊门到放弃' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
]
}
}
}
</script>
⾼级表格 vxe-grid
<template>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>
<script>
export default {
data() {
return {
gridOptions: {
resizable: true,
showOverflow: true,
columns: [
{ type: "seq", width: 50 },
{ field: "name", title: "名称" },
{
field: "sex",
title: "性别",
showHeaderOverflow: true,
},
],
data: [
{
id: 10001,
name: "Test1",
sex: "Man"
},
{
id: 10002,
name: "Test2",
sex: "Women"
}
],
},
};
},
};
</script>
vxe-table 和 vxe-grid 有什么区别
grid 包含 table全部功能，集成分页、表头json配置，更⽅便更简洁、整合代理⾃动触发接⼝。
说明vxe-table(普通表格)vxe-grid(⾼级表格)
⽤法单元格使⽤JSON配置{ fild: 'xx' }
动态列√ 静态√ 全动态JSON
⾃定义模板√ 部分 (插槽)√ 完整 (插槽、JSX、渲染函数)表单√ 集成
⼯具栏√ 集成
分页√ 集成
CRUD√ 部分(新增、删除、修改)√ 完整 (查询、新增、删除、修改、标记)
数据代理√
全屏放⼤√
数据校验√√
基础参数及事件√√
边框√√
序号√√
复选框、单选框√√
⾼亮⾏和列√√
格式化内容√√
筛选√√浏览器json格式化
多列排序√√
列宽拖动√√
分组表头√√
左右固定列√√
展开⾏√√
树形结构√√
按键导航√√
显⽰/隐藏列√√
右键快捷菜单√√
合并√√
导⼊√√
导出(xlsx,csv,html,xml,txt,pdf)√√
打印√√

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。