在vue项目中，我们可能会遇到数据较多且不能借助分页来展示的表格列表，那么vxe-table就是一个很好的选择，它是一个非常强大的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。下面来看一下怎么实现的。
vxe-table官网：https://vxetable.cn/v2/#/table/start/install
实现代码
// 安装----
npm install xe-utils vxe-table// 全局引用 main.js
import { App, createApp } = 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'function useTable (app: App) {app.use(VXETable)
}//html
<vxe-table:align="allAlign":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>
</ve-table>//jsexport default {data () {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai' }]}}
}遇到的问题及解决办法
当数据过多的时候，有操作弹窗打开关闭后，会出现列表重新刷新并回到表格最开始位置。
需要实现弹窗关闭后表格回到弹窗打开时候的位置。
代码实现
<template><div class="box"><vxe-table:align="allAlign":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"><template slot-scope="scope"><div @click='changeAge(scope.row[items.prop])'>{{scope.row[items.prop]}}</div></template></vxe-table-column></ve-table><div class="dialogBox" v-show="inputShow">请输入年龄：<input v-model="age" placeholder="请输入"></input><span @click="changeOk">确定</span></div></div>
</template><script>
export default {data() {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai' }],inputShow: false,form:{age: '',id:'',}，scrollHeight: 0}},methods: {// 设置表格的滚动位置setVxePos(){setTimeout(() => {// 还原滚动条位置:定位到勾选行this.$nextTick(() => {this.$refs.multipleTable.scrollTo(this.scrollLeftVxe, this.scrollTopVxe)})}, 100)},//重新设置年龄changeAge(oldAge){let { scrollTop, scrollLeft } = this.$refs.multipleTable.getScroll();//记录位置this.scrollTopVxe = scrollTop;this.scrollLeftVxe = scrollLeft;this.inputShow = true;},//确认修改changeOk(){this.inputShow = false;this.setVxePos();},}
}
</script><style>
</style>
