前言

在项目中遇到一个较为特殊的页面，它默认展示基础表格数据但在搜索栏提供了Checkbox 多选框。勾选“聚合”将会以树形数据展示。

考虑实现

由于基础表格与树形表格在注入data对象数组格式上还是有区别，当 data 中包含 children 字段时，被视为树形数据。格式不同决定了在获取数据时处理方式的不同，结合当前页面要么在勾选“聚合”后再次请求后台获取适配树形表格的结构数据，要么在默认加载基础表格数据的同时对数据再加工在前端重新构建树形表格数据备用，等勾选“聚合”按钮后传入数据进行展示。在数据量大的情况下我这边采用的是第二种方式并且用到了Element UI Pagination 分页。

前端实现

页面上分别用两个Table 表格组件展示基础表格数据和树形表格数据，以勾选聚合触发jhchecked的Boolean值来隐藏或显示两种表格数据

构建数据

	//vue 对象数组去重unique(arr) {const res = new Map();//定义常量 res,值为一个Map对象实例//返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1return arr.filter((arr) => !res.has(arr.deviceSn) && res.set(arr.deviceSn, 1));},getDataTable(){this.loading = true;getsjgjdatatable(this.queryParams).then(response =>{//基础表格数据this.tableData = response.datathis.total = response.data.length// 拷贝一份数据let list = JSON.parse(JSON.stringify(response.data))// splice处理数组的方法会改变原数组,所以需要拷贝一份this.pageList = list.splice(0, this.size)this.loading = false;//构建树形表格数据if(response.data.length > 0){          let arr1 = this.unique(this.tableData);var jhData = [];for(var i=0;i<arr1.length;i++){var obj = {};obj.id = arr1[i].deviceSn+'_'+ivar newlist = [];for(var j=0;j<this.tableData.length;j++){var chil = {};if(arr1[i].deviceSn==this.tableData[j].deviceSn){chil.id = this.tableData[j].eventIdchil.eventId = this.tableData[j].eventIdchil.deviceSn = this.tableData[j].deviceSnchil.stationSn = this.tableData[j].stationSnchil.reportTime = this.tableData[j].reportTimechil.info = this.tableData[j].infochil.stationName = this.tableData[j].stationNamechil.deviceName = this.tableData[j].deviceNamechil.typeName = this.tableData[j].typeNamechil.levelName = this.tableData[j].levelNamenewlist.push(chil);}}obj.children = newlistobj.reportTime = arr1[i].stationName+':'+arr1[i].deviceName+' 告警数：'+newlist.lengthjhData.push(obj);}this.jhtableData = jhDatathis.jhtotal = jhData.length// 拷贝一份数据let jhlist = JSON.parse(JSON.stringify(jhData))// splice处理数组的方法会改变原数组,所以需要拷贝一份this.jhpageList = jhlist.splice(0, this.jhsize)}else{this.jhpageList= []}})}, 

分页

<el-table:span-method="arraySpanMethod"v-show="jhchecked"v-loading="loading"@select="select" @select-all="selectAll" @selection-change="selectionChange"borderref="table"height="720"row-key="id":data="jhpageList"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column type="selection" width="55" align="center" /><el-table-column prop="reportTime" label="发生时间" align="left" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="info" label="告警" align="left" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="stationName" label="站点" align="center" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="deviceName" label="设备" align="center" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="typeName" label="告警类型" align="center" show-overflow></el-table-column><el-table-column prop="levelName" label="告警级别" align="center" show-overflow></el-table-column><el-table-column prop="xq" label="详情" align="center" show-overflow><template slot-scope="scope"><el-buttonsize="mini"type="text"@click="handleXq(scope.row)">查看</el-button></template></el-table-column><el-table-column prop="cz" label="操作" align="center" show-overflow><template slot-scope="scope"><el-buttonsize="mini"type="text"@click="handleQr(scope.row)">确认</el-button> <el-divider direction="vertical"></el-divider><el-buttonsize="mini"type="text"@click="handleTj(scope.row)">提交工单</el-button></template></el-table-column></el-table><el-paginationstyle="float: right;margin-top: 25px;"v-show="jhchecked":page-sizes=[25,50,100]background@size-change="jhhandleSizeChange"@current-change="jhhandleCurrentChange":current-page="jhcurrent"layout="total, sizes, prev, pager, next, jumper":total="jhtotal"></el-pagination>data() {return {open:false,isDevice:false,isReturn:false,nowDateTime:getNowDateTime(),stationSn:null,data: [],defaultProps: {children: 'children',label: 'name'},expandDefault:[],checkDefault:[],title:"",total:0,loading:false,tableData:[],jhtableData:[],size: 25,current: 1,pageList: [],jhtotal:0,jhsize: 25,jhcurrent: 1,jhpageList: [],};},methods:{//改变当前页数jhhandleSizeChange(val) {console.log("改变当前页数")// 只要换页数就直接返回1页this.jhsize = valthis.jhcurrent = 1this.jhpageList = this.jhtableData.slice(0, this.jhsize)},// 改变当前页码jhhandleCurrentChange(val) {console.log("改变当前页码")this.jhcurrent = val//如果页码为1,就正常切割if (val == 1) {this.jhpageList = this.jhtableData.slice(0, this.jhsize)return}// 当前页码不为1时val = (val - 1) * this.jhsizethis.jhpageList = this.jhtableData.slice(val, val + this.jhsize)},getData(){this.current = 1this.jhcurrent = 1this.getDataTable();},}

树形表格数据多选

setChildren(children, type) {// 编辑多个子层级children.map(j => {this.toggleSelection(j, type)if (j.children) {this.setChildren(j.children, type)}})},// 选中父节点时，子节点一起选中取消select(selection, row) {const hasSelect = selection.some(el => {return row.id === el.id})if (hasSelect) {if (row.children) {// 解决子组件没有被勾选到this.setChildren(row.children, true)}} else {if (row.children) {this.setChildren(row.children, false)}}},toggleSelection(row, select) {if (row) {// 懒加载之后出现的数据，在 tableData 里面的没有的，// 懒加载取到的数据，若是不重新赋值给 tableData 对象，在 tableData 中是不会显示这部分数据的。// 最主要最主要的一点代码：// 将懒加载获取的数据，重新赋值给当前父节点的 children 字段。this.$nextTick(() => {this.$refs.table &&this.$refs.table.toggleRowSelection(row, select)})}},// 选择全部selectAll(selection) {// tabledata第一层只要有在selection里面就是全选const isSelect = selection.some(el => {const tableDataIds = this.jhpageList.map(j => j.id)return tableDataIds.includes(el.id)})// tableDate第一层只要有不在selection里面就是全不选const isCancel = !this.jhpageList.every(el => {const selectIds = selection.map(j => j.id)return selectIds.includes(el.id)})if (isSelect) {selection.map(el => {if (el.children) {// 解决子组件没有被勾选到this.setChildren(el.children, true)}})}if (isCancel) {this.jhpageList.map(el => {if (el.children) {// 解决子组件没有被勾选到this.setChildren(el.children, false)}})}},// 获取到选中的selectionChange(selection) {//console.log(val)console.log("获取到选中的")console.log("JSON.stringify(selection)：："+JSON.stringify(selection))this.ids = selection.map((item) => item.eventId);this.single = selection.length !== 1;this.multiple = !selection.length;},

树形数据表格涉及到合并列(合并单元格后行高变高的处理)

	//通过给table传入span-method方法可以实现合并行或列arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (row.children != undefined) {if (columnIndex === 0) {return [1, 1]}else if(columnIndex === 1) {return [1, 9]}else{return [0, 0]}}},

参考

element ui Table表格组件
vue 对象数组去重
前端分页
树形表格数据多选
element table合并单元格后行高变高的问题

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！