一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
设计理念
- 面向现代浏览器,高效的简洁 API 设计
- 模块化表格、按需加载、扩展接口
- 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
安装
使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
依赖库: xe-utils2.7+ vue2.6+
npm install xe-utils vxe-table
导入
import Vue from 'vue' import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/index.css' Vue.use(VXETable) // 给 vue 实例挂载全局窗口对象,属性名称随意定义,例如:$XModal Vue.prototype.$modal = VXETable.modal
借助插件 babel-plugin-import 可以实现按需加载模块,减少文件体积。修改 .babelrc 或 babel.config.js 配置文件
基础功能
vxe-table除了提供强大的表格制作能力,还有提供一些基础功能使用,比如按钮、图标、表单、开关、工具栏、分页等;
基础表格
通过简单的代码就能创建一张表格;
居左居中居右
自定义模板表格
使用 slot 自定义模板;可以实现自定义任意内容及 html 元素
default:自定义内容模板(提前格式化(最优) > formatter(值发生变化时) > slots(即时))
header:自定义表头模板
footer:自定义表尾模板
filter:自定义筛选模板(建议使用渲染器,可以更好的复用)
edit:自定义可编辑模板(建议使用渲染器,可以更好的复用)
{{ $t('app.body.button.insert') }}下拉按钮删除保存
名称
序号
支持放弃弹框{{ row.name }} 我是超链接:{{ row.name }} 自定义头部 累计:{{ items[_columnIndex] }} {{ row.sex }} 编辑删除{{ formatDate(row.time) }} {{ row.name }} 自定义模板 无 自定义模板 {{ selectRecords.length }} 条 修改管理删除更多操作批量修改批量管理批量删除 {{ selectRow ? selectRow.text : '' }}
export default { data () { return { value1: '', value2: '', showDetails: false, selectRow: null, isAllChecked: false, isIndeterminate: false, selectRecords: [], tableData: [], tablePage: { total: 0, currentPage: 1, pageSize: 10 } } }, created () { this.tableData = window.MOCK_DATA_LIST.slice(0, 10) }, methods: { formatDate (value) { return XEUtils.toDateString(value, 'yyyy-MM-dd HH:mm:ss.S') }, filterSexMethod ({ option, row }) { return row.sex === option.data }, changeFilterEvent (evnt, option, $panel) { $panel.changeOption(evnt, !!option.data, option) }, showDetailEvent (row) { this.selectRow = row this.showDetails = true }, clickFooterItem (items, _columnIndex) { this.$XModal.alert(`点击了表尾第${_columnIndex}列`) }, checkboxChangeEvent ({ records }) { this.isAllChecked = this.$refs.xTable.isAllCheckboxChecked() this.isIndeterminate = this.$refs.xTable.isCheckboxIndeterminate() this.selectRecords = records }, changeAllEvent () { this.$refs.xTable.setAllCheckboxRow(this.isAllChecked) this.selectRecords = this.$refs.xTable.getCheckboxRecords() }, footerMethod ({ columns, data }) { return [ columns.map(column => { if (['sex', 'num'].includes(column.property)) { return XEUtils.sum(data, column.property) } return null }) ] } } }
.first-col { position: relative; height: 20px; } .first-col:before { content: ""; position: absolute; left: -15px; top: 10px; width: 170px; height: 1px; transform: rotate(20deg); background-color: #e8eaec; } .first-col .first-col-top { position: absolute; right: 4px; top: -10px; } .first-col .first-col-bottom { position: absolute; left: 4px; bottom: -10px; } .my-filter { margin: 10px; } .page-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 10; }
树形表格
名称
export default { data () { return { filterName: '', loading: false, originData: [], tableData: [] } }, created () { this.loading = true setTimeout(() => { this.loading = false this.originData = XEUtils.clone(window.MOCK_TREE_DATA_LIST, true) this.handleSearch() }, 300) }, methods: { handleSearch () { let filterName = XEUtils.toString(this.filterName).trim() if (filterName) { let options = { children: 'children' } let searchProps = ['name'] this.tableData = XEUtils.searchTree(this.originData, item => searchProps.some(key => XEUtils.toString(item[key]).indexOf(filterName) > -1), options) // 搜索之后默认展开所有子节点 this.$nextTick(() => { this.$refs.xTree.setAllTreeExpand(true) }) } else { this.tableData = this.originData } }, // 创建一个防反跳策略函数,调用频率间隔 500 毫秒 searchEvent: XEUtils.debounce(function () { this.handleSearch() }, 500, { leading: false, trailing: true }) } }
扩展插件
End
vxe-table的表格制作能力确实比较强,有很多功能这里并没有一一列出,感兴趣的朋友可以访问文档地址查看。
vxe-table文档地址:
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install
ps: 喜欢@IT老实人分享的内容,觉得对你的学习或者工作有所帮助就不要吝啬你的赞哦~,关注@IT老实人并私信小编你希望获得的学习资料,小编也会尽力帮助你的哦^^,当然也可以向小编交流学习问题哈!