new Vue({ el:container, data(){ return { width:'640px', hrows:1, rows:5, cols:5, seling:false, seltype:0, // 0 未选择 1 td 2 th begin_col:-1, begin_row:-1, end_col:-1, end_row:-1, merges:[ [ 1, 1, 1, 2, 2 ] ], texts:{} } }, computed:{ sel_row_min(){ return Math.min(this.begin_row,this.end_row) }, sel_row_max(){ return Math.max(this.begin_row,this.end_row) }, sel_col_min(){ return Math.min(this.begin_col,this.end_col) }, sel_col_max(){ return Math.max(this.begin_col,this.end_col) }, isHasBegin(){ return (this.begin_row>-1) && (this.begin_col > -1) }, isHasEnd(){ return (this.end_row>-1) && (this.end_col > -1) }, outhtml(){ let split=" "; return "\n"+[ [this.outdata.thead,"thead"],[this.outdata.tbody,"tbody"] ].filter(item=>item[0].length>0).map(([trs,tag])=>{ return split+"<"+tag+">\n"+trs.map(tr=>{ return split+split+"\n"+tr.map(td=>{ let attr = ""; td.attrs.rowspan && (attr+=` rowspan="${td.attrs.rowspan}"`) td.attrs.colspan && (attr+=` colspan="${td.attrs.colspan}"`) return split+split+split+`${this.getText(td.type,td.rowindex,td.colindex)}` }).join("\n")+"\n"+split+split+"" }).join("\n")+"\n"+split+"" }).join("\n")+"\n

" }, outdata(){ let table = { thead:[], tbody:[] }; [ [2,this.hrows,this.cols,table.thead], [1,this.rows,this.cols,table.tbody] ].forEach(([type,rows,cols,trs])=>{ for(var ridx =0;ridxitem[0]===type&&item[1]===ridx&&item[2]===cidx) }, isCellVisibled(type,ridx,cidx){ var item = this.merges.find(item=>item[0]===type&&ridx>=item[1]&&ridx<=item[3]&&cidx>=item[2]&&cidx<=item[4]); return item&&(item[1]!==ridx||item[2]!==cidx)?false:true }, btn_merge_click(){ this.merges.push(this.getCurrentSel()); }, delMergeItemByIndex(index){ this.merges.splice(index,1); }, getCurrentSel(){ return [ this.seltype, this.sel_row_min, this.sel_col_min, this.sel_row_max, this.sel_col_max ] }, cellIsSelected(type,rowidx,colidx){ return rowidx>=this.sel_row_min && rowidx<=this.sel_row_max && colidx>=this.sel_col_min && colidx<=this.sel_col_max }, showsel(type,rowidx,colidx){ return type == this.seltype && this.isHasBegin && this.isHasEnd && this.cellIsSelected(type,rowidx,colidx) }, setEnd(ridx,cidx){ this.end_row = ridx; this.end_col = cidx; this.$emit("sel"); this.$emit("selend"); }, setBegin(ridx,cidx){ this.begin_row = ridx; this.begin_col = cidx; this.$emit("sel"); this.$emit("selbegin"); }, startSel(type){ this.seltype = type; this.seling = true; }, stopSel(){ this.seling = false; }, td_mouse_keydown(rowidx,colidx){ this.startSel(1); this.setBegin(rowidx,colidx); this.setEnd(rowidx,colidx); }, td_mouse_move(rowidx,colidx){ if(!this.seling){return;} this.setEnd(rowidx,colidx); }, td_mouse_keyup(rowidx,colidx){ this.setEnd(rowidx,colidx); this.stopSel(); }, th_mouse_keydown(rowidx,colidx){ this.startSel(2); this.setBegin(rowidx,colidx); this.setEnd(rowidx,colidx); }, th_mouse_move(rowidx,colidx){ if(!this.seling){return;} this.setEnd(rowidx,colidx); }, th_mouse_keyup(rowidx,colidx){ this.setEnd(rowidx,colidx); this.stopSel(); } } }),""