プロジェクトのシナリオ:
要件: 左列の結合だけでなく、中央列と末尾列のセルの結合も可能です 現在、Ele.me 公式には開始列の結合のみが用意されています 実装効果は図に示されています:
>>>
行と列を結合するためのコードのカプセル化:
ヒント: ここでは、プロジェクトで発生した問題について説明します:
例: データ送信プロセス中に時々データが失われ、場合によってはデータの一部が失われます。APP
でデータを受信するためのコード:
export const mergeCol =({
condition,
colIndex,
isBefore = true，
data = []
}) => {
let mergeArr = []
let objSpanMethod = ({
rowIndex, columnIndex }) => {
let condi = isBefore? columnIndex < colIndex : columnIndex > colIndex
if(condi) {
const rowspan =mergeArr[rowIndex]
const colspan rowspa> 0 ? 1: 0
return {
rowspan,
colspan
}
}
}
/*********************************/
let collectMergeLine = () => {
let collectArr =[1]
let collectPos =0
for(let i=1; data.length; i++) {
if (condition(i, data[i])) {
collectArr[collectPos] += 1
collectArr.push(0)
} else {
collectArr.push(1)
collectPos = i
}
}
console.1og(collectArr)
mergeArr = collectArr
}
return {
mergeArr, objSpanMethod. collectMergeline }
/**********************************/
/*合併表格單元格
* @param {array} colsIndex合併行索引
*/
export class mergeTableCol {
constructor(colsIndex) {
this.colsIndex = colsIndex
this.mergeArr =[]
}
objSpanMethod({
rowIndex, columnIndex }) {
let condi = this.colsIndex.includes(columnIndex)
if (condi) {
const rowspan = this. mergeArr[rowIndex]
const colspan =rowspan > 0 ? 1 : 0
return {
rowspan,
colspan
}
}
}
/*********************************/
/**
*收集合併行
*@param {function} condition條件返回true或false
*@param {array} data表格數據
*/
collectMergeLine(condition, data) {
let collectArr = [1]
let collectPos = 0
for(let i = 1; i < data.length; i++) {
if(condition(i, data[i])) {
collectArr[collectPos] +=1
collectArr.push(0)
} else {
collectArr.push(1)
collectPos = i
}
}
this.mergeArr = collectArr
return collectArr
}
}
コンポーネント内でこのファイルを参照します。
この要件を必要とするページ コンポーネントにこのファイルを導入します。 >>>
次に、(:span-method="objSpanMethod") 関数をフォーム タグ (v-bind) にバインドします。>>>
対応する関数をインポートします>>>
methods:{
//表格合并处理
mergeCell(arr) {
this.mergeFn = new mergeTableCol(arr)
if(this.tableData.length > 0 ) {
this.collectMergeLine()
}
},
objSpanMethod(tableParams) {
if(this.mergeFn.objSpanMethod) {
return this.mergeFn.objSpanMethod(tableParams)
}
},
collectMergeLine(data = this.tableData) {
if(this.mergeFn.collectMergeLine) {
//判断渲染的数据id是否一致，合并条件
let condition = i=> data[i].id == data[i-1].id
//第一个参数是条件,返回true或false
this.mergeArr = this.mergeFn.collectMergeLine(condition, data)
}
},
データを要求した後、マージする必要がある列を配列に保存し、その配列を megerCell 関数に渡して処理します。>>>
