2. 程式人生 > >element表格資料跨行、跨列操作合併顯示

element表格資料跨行、跨列操作合併顯示

阿新 • • 發佈：2019-01-24
import _ from 'lodash' export default { data () { return { tableData6: [], tableHeader: {'sex': '性別', 'age': '年齡', 'hc': '承載人數'}, priceOption: { sex: ['男', '女'], age: [18, 20], hc: ['2-6人', '7-8人'] }, priceFactor: ['sex', 'age', 'hc'] } }, created () { this
.tableData6 = this.plzhFirst(this.priceOption) this.combineCell(this.tableData6) for (var i = 0; i < this.tableData6.length; i++) { this.addPrice(this.tableData6[i], '請輸入') } }, methods: { addPrice (item, price) { this.$set(item, 'price', price) }, getCellClassName ({row, column, rowIndex, columnIndex}) { if
(row['@' + this.priceFactor[columnIndex] + 'dis']) { return 'hidden' } else { return '' } }, plzhFirst (datas) { var array = [] var propObj = this.getFirstProp(datas) var propName = propObj.name var propValue = propObj.value if (_.isArray(propValue)) { for
(var i = 0; i < propValue.length; i++) { var newObj = {} newObj[propName] = propValue[i] array.push(newObj) } } else { let newObj = {} newObj[propName] = propValue array.push(newObj) } for (let i = 1; i < this.priceFactor.length; i++) { array = this.plzh( array, this.priceOption[this.priceFactor[i]], this.priceFactor[i] ) } return array }, getFirstProp (obj) { var propObj = {} for (var i in obj) { propObj.name = i propObj.value = obj[i] return propObj } }, plzh (arr1, arr2, nextAttr) { var array = [] for (var i = 0; i < arr1.length; i++) { var obj = arr1[i] for (var j = 0; j < arr2.length; j++) { var newObj = _.cloneDeep(obj) var v2 = arr2[j] newObj[nextAttr] = v2 array.push(newObj) } } return array }, colsLogic () {}, objectSpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 3) { return [1, 1] } return [row['@' + this.priceFactor[columnIndex] + 'span'], 1] }, combineCell (list) { for (let field in list[0]) { var k = 0 while (k < list.length) { list[k]['@' + field + 'span'] = 1 list[k]['@' + field + 'dis'] = false for (var i = k + 1; i <= list.length - 1; i++) { if (list[k][field] === list[i][field] && list[k][field] !== '') { list[k]['@' + field + 'span']++ list[k]['@' + field + 'dis'] = false list[i]['@' + field + 'span'] = 1 list[i]['@' + field + 'dis'] = true } else { break } } k = i } } return list } } }

相關推薦

element表格資料跨行、跨列操作合併顯示

import _ from 'lodash' export default { data () { return { tableData6: [], tableHeader: {'sex': '性別', 'age': '年齡', 'hc': '承載人數'},

表單跨行，跨列實現

表單跨行，跨列實現 1. 需求 欲實現表單的多行/列 的合併，但是不影響整體美觀。 2. 程式碼 <html> <head > <meta charset="utf-8"> <style> &

QRowTable表格控制元件-支援hover整行、checked整行、指定列排序等

目錄 一、開心一刻 二、嘴一嘴 三、效果展示 四、淺談實現 五、自定義資料來源 1、data函式 2、flags函式 六、自定

html5 postMessage解決跨域、跨窗口消息傳遞

請求 getc ram else 參數 containe 寫法 這也 打開 平時做web開發的時候關於消息傳遞，除了客戶端與服務器傳值還有幾個經常會遇到以下這些問題，那麽對此就來分析解答一下如何做吧： 　　1.頁面和其打開的新窗口的數據傳遞 　　2.多窗口之間消息傳遞 　　

VBA取得EXCEL表格中的行數和列數

VBA取得EXCEL表格中的行數和列數       初學EXCEL巨集的童鞋，總是很想知道表格中含有資料的行數和列數，尤其是行數和列數不確定的情況下。這樣可以避免很多的錯誤，並且可以提高效率。但每次用到的時候到網上查詢時，總是給了很多無用的答案，往往找不到想要的

html5 postMessage解決跨域、跨視窗訊息傳遞簡單案例

方法解釋： postMessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞。 postMessage(data,origin)方法接受兩個引數： 1.data:你需要傳遞的訊息，訊息傳遞的格式有一定要求：引數可以是JavaScript

處理session跨伺服器、跨域失效問題

  最近遇到一個需求，就是在單體架構的系統上要將系統中的檔案資源分離到另一個資源系統中，這時候就需要考慮到跨域的問題了。網上解決方式有以下幾種： 網上跨域的解決方案 Java中解決跨域的方式主要有兩種： 1）第一種解決方法 後臺程式碼在被請求的Servlet中新增Header設定respon

html5 postMessage解決跨域、跨視窗訊息傳遞

一些麻煩事兒 平時做web開發的時候關於訊息傳遞，除了客戶端與伺服器傳值還有幾個經常會遇到的問題 1.頁面和其開啟的新視窗的資料傳遞 2.多視窗之間訊息傳遞 3.頁面與巢狀的iframe訊息傳遞 4.上面三個問題的跨域資料傳遞 postMessage()

矩陣的遍歷--按行、按列、蛇形

這裡有一個假設：  在影象處理等領域中，二維矩陣已經按照行的方式存放在了一維陣列mat中了。  矩陣的高記為height，寬記為width；  1.按行遍歷 for (int i = 0; i < height; ++i)

跨域、跨伺服器呼叫時候session丟失的問題總結！！！

http://blog.csdn.net/zq9017197/article/details/6326667 這篇文件是最近一次工作中遇到問題的總結，且聽我娓娓道來：（可能有很多地方不對，我只是這樣想通拉。） 最近新進一個公司，做的專案是手機支付系統。由於涉及到金

C/C++小程式學習：n*n魔方矩陣實現每行、每列、每一對角線上的元素之和相等

用一個程式實現n*n魔方矩陣中，每一行、每一列、每一對角線上的元素之和相等。 矩陣規律： 本程式只適合基數，解釋如下：  N 為奇數時，此題中N設為5 (1) 將1放在第一行中間一列; 　　 (2) 從2開始直到n×n止各數依次按下列規則存放： 　　按 45°方向行走

用VBA得到EXCEL表格中的行數和列數

方法3: 　　ActiveSheet.Cells.SpecialCells(xlCellTypeLastCell).Row 　　ActiveSheet.Cells.SpecialCells(xlCellTypeLastCell).Column 　　缺點：在工作表進行對刪除或清除操作時也會變得比實際情況大。方法

HTML5 postMessage解決跨域、跨iframe視窗訊息傳遞

主頁面 接收訊息： <#-- 頁頭 --> <#assign pageTitle><@spring.message "secure.video.sidebar.videograb"/></#assign> <#assi

ASP.NET 安全認證（四）——巧妙實現 Form 表單認證跨站點、跨伺服器的單點登入（Single Sign On）

【原創】ASP.NET 安全認證（四） ——巧妙實現 Form 表單認證跨站點、跨伺服器的單點登入（Single Sign On） 作者：寒羽楓(cityhunter172) 第四部分 Form 認證的補充 前三篇在 CSDN 論壇公佈後，效果如同“神仙放屁——果然不同

HTML表格———表格題目位置、摺疊邊框、隔行增色、跨行跨列、巢狀表格

建立基本表格 <table> <caption>這是一個表格</caption> <tr> <th>a</th> <th>b</th&g

◮ R語言筆記(七): 利用Apply()函式在二維資料行、列上進行統計

這裡的二維資料可以是矩陣的形式也可以是資料框的形式， 通過apply()函式的正確使用，可以在二位資料的行、列上進行自己想要的操作： 例如： 每一列/每一行的資料之和sum、中位數median、均值mean和方差var等；   *******************

Python 3.x對.CSV資料按任意行、列讀取

對與已存檔的.CSV資料進行讀取，不知其存取方式的情況下讀取很棘手，廢話不多說，原始資料如下： 問題： 1. 取出第一行資料。 2. 取出第一列資料。 解決思路(程式碼一看便知)： file =open('xxxx.csv','r') lines=file.readli

Excel小技巧-你是否只知道表格按列排序?其實也可以按行排序!excel資料按行排序

Excel小技巧-你是否只知道表格按列排序?其實也可以按行排序!excel資料按行排序。系統預設情況下，資料都是按列進行排序的，可以通過簡單的操作，讓其進行按行進行排序。 【解決方法，教程視訊資料如下】 本教程視訊資料來源：http://edu.51cto.com/course/15404.html 完

postgres 刪除重複資料、生成隨機數、跨庫查詢、一段間隔後的時間

postgres刪除重複資料 sql語句： delete from table where ctid not in (select min(ctid) from table group by tableColumn) 其中： table是資料表表名， tableColumn是判

HBase的java操作，最新API。（查詢指定行、列、插入資料等）

– 關於HBase環境搭建和HBase的原理架構，請見筆者相關部落格。 1.HBase對java有著較優秀的支援，本文將介紹如何使用java操作Hbase。 首先是pom依賴： <dependency> <groupId>org