VUE+elementUI横向表格 |
您所在的位置：网站首页 › 用word做横向表格 › VUE+elementUI横向表格 |
|
最近有个需求需要表格横向，双向表头，然后形成矩阵 查了一些资料后，都模棱两可，汇总了一下，用以下方法实现 中间单元格需要做一个交叉取值，所以定义了一个方法，通过横向的id到纵向数据里面取到对应的值 翻页的话，可以通过监控表格的滚动条实现，但是不太好使，我就加了个按钮通过点击按钮获取下一页内容 html代码 {{scope.row.stnName}} {{getItemValue(scope.row,col)}}js代码 var rootVm = new Vue({ el: '#domestic_coord', data() { return { dataForm: { pageNum: 1, pageSize: 50, }, columnList: [], tableData: { data: [], total: 0 }, } }, created: function () { this.loadTableData(); }, watch: { //因为左边第一列固定会造成，样式错乱，每次需要更新布局 "tableData": { handler() { this.$nextTick(() => { this.refs.table.doLayout(); }); } } }, mounted: function () { }, methods: { //初始化表格数据 loadTableData() { let index = layer.load(1, { shade: [0.1, '#fff'] //0.1透明度的白色背景 }); axios.post('/xxxxx/loadData', this.dataForm) .then(function (response) { if (response.data.stnList.length > 0) { rootVm.columnList = response.data.otherStnList; rootVm.tableData.data = response.data.stnList; } rootVm.$refs.table.doLayout(); layer.close(index); }) .catch(function (error) { console.log(error) layer.close(index); }); }, //单元格数据 getItemValue(row, col) { if (row[col.stnId] == undefined) { return "--"; } return row[col.stnId] } , //加载更多数据 loadMoreTableData() { rootVm.dataForm.pageNum = rootVm.dataForm.pageNum + 1; this.loadTableData(); this.$refs.table.bodyWrapper.scrollLeft = 0; }, } })响应数据 { "otherStnList": [ { "dataId": "111112b", "stnType": null, "stnName": "FY-2B", "ntcType": null, "longNom": 86.5, }, { "dataId": "5555-2bs", "stnType": null, "stnName": "F2323BS", "ntcType": null, "longNom": 86.5, }, { "dataId": "344-a-86.5e", "stnType": null, "stnName": "FY4242141.5E", "ntcType": null, "longNom": 86.5, }, { "dataId": "1213-a-99.5e", "stnType": null, "stnName": "FYGE424299.5E", "ntcType": null, "longNom": 99.5, }, { "dataId": "32222-96e", "stnType": null, "stnName": "SIGN42T-96E", "ntcType": null, "longNom": 96.0, }, { "dataId": "3232-96e_1", "stnType": null, "stnName": "SIGN4214196E_1", "ntcType": null, "longNom": 96.2, }, { "dataId": "3132-3", "stnType": null, "stnName": "STA4141ME-3", "ntcType": null, "longNom": 89.8, } ], "stnList": [ { "dataId": "32132", "stnName": "APSTAR-2", "longNom": 134.0, "111112b": "未知" } ] } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |