ElementUIテーブル連結セル
3054 ワード
コードは次のとおりです.
:data="listData":span-method="objectSpanMethod"class="tableArea"style="width:100%">prop="type"label="シーケンス番号"align="center"width="200"/>prop="sheetType"label="作業指示タイプ"//>prop="taskKey"label="taskKey"/>prop="templateUrl"label="templateUrl"/>label="操作" > <br> <br>export default {<br> name:'myNeedDeal',<br> data() {<br> return {<br> rowList:[],<br> spanArr:[],<br> position:0,<br> listData:[]<br> }<br> },<br> <br> methods:{<br> queryData(){ <br> .el-select {<br> margin-right: 15px;<br> }<br> .el-input {<br> margin-right: 15px;<br> width: 200px;<br> }<br> .tableArea {<br> margin-top: 20px;<br> box-shadow: 0 0 8px 0 #aaa;<br> }<br> i[class^="el-icon"] {<br> margin-right: 5px;<br> font-size: 16px;<br> cursor: pointer;<br> }<br> .modify_table{<br> td{<br> padding: 10px ;<br> }<br> }<br> .item_title{<br> text-align: right; <br> }<br>
詳細:
row:前進する
column:先頭に立つ
rowIndex:現在の行番号
columnIndex:現在の列番号
この関数は、2つの要素を含む配列を返すことができ、1つ目の要素は
indexが2の場合、if(this.listData[index].type==this.listData[index-1].type)は、2行目を1行目と比較し、
2行目が1行目と等しい場合、これは.positionは+1で、n行の最初の行がある場合は同じです.positionはnであり、n行を下にマージすることを示す.2行目は自分でthis.spanArr.push(0)は、2行目が「消える」ことを表します.1行目と2行目が合併したからでしょう.
2行目と1行目が等しくなければ、これは.spanArr.push(1);2行目を自分で1行独占させます.this.position=indexとは、ポインタをindexの行に持ってきて、配列を設定することを意味する.spanArr[this.position]の要素値を定義し、この行から数行下にマージすることを定義します(この文では、indexが3の場合、this.positionが3、indexが4の場合、4行目と3行目を合わせる必要があります.配列のthis.position要素は+1、つまりthis.spanArr[this.position]+=1)
最後の一言
_row:連結行を表す行数,rowの値は1、またはより大きな自然正の整数、または0です.
1代表:排他的な行
より大きな自然数:複数のローがマージされたことを示します.
0:「消える」のどのセルを表し、後ろのセルを前に1つ押す
:data="listData":span-method="objectSpanMethod"class="tableArea"style="width:100%">prop="type"label="シーケンス番号"align="center"width="200"/>prop="sheetType"label="作業指示タイプ"//>prop="taskKey"label="taskKey"/>prop="templateUrl"label="templateUrl"/>label="操作" > <br> <br>export default {<br> name:'myNeedDeal',<br> data() {<br> return {<br> rowList:[],<br> spanArr:[],<br> position:0,<br> listData:[]<br> }<br> },<br> <br> methods:{<br> queryData(){ <br> .el-select {<br> margin-right: 15px;<br> }<br> .el-input {<br> margin-right: 15px;<br> width: 200px;<br> }<br> .tableArea {<br> margin-top: 20px;<br> box-shadow: 0 0 8px 0 #aaa;<br> }<br> i[class^="el-icon"] {<br> margin-right: 5px;<br> font-size: 16px;<br> cursor: pointer;<br> }<br> .modify_table{<br> td{<br> padding: 10px ;<br> }<br> }<br> .item_title{<br> text-align: right; <br> }<br>
詳細:
:span-method="objectSpanMethod" row:前進する
column:先頭に立つ
rowIndex:現在の行番号
columnIndex:現在の列番号
この関数は、2つの要素を含む配列を返すことができ、1つ目の要素は
rowspanを表し、2つ目の要素はcolspanを表す.rowspanとcolspanという名前のオブジェクトを返すこともできます.this.spanArr ， rowspan（） this.spanArr ， rowspanindexが2の場合、if(this.listData[index].type==this.listData[index-1].type)は、2行目を1行目と比較し、
2行目が1行目と等しい場合、これは.positionは+1で、n行の最初の行がある場合は同じです.positionはnであり、n行を下にマージすることを示す.2行目は自分でthis.spanArr.push(0)は、2行目が「消える」ことを表します.1行目と2行目が合併したからでしょう.
2行目と1行目が等しくなければ、これは.spanArr.push(1);2行目を自分で1行独占させます.this.position=indexとは、ポインタをindexの行に持ってきて、配列を設定することを意味する.spanArr[this.position]の要素値を定義し、この行から数行下にマージすることを定義します(この文では、indexが3の場合、this.positionが3、indexが4の場合、4行目と3行目を合わせる必要があります.配列のthis.position要素は+1、つまりthis.spanArr[this.position]+=1)
最後の一言
const _col = _row>0 ? 1 : 0;_row:連結行を表す行数,rowの値は1、またはより大きな自然正の整数、または0です.
1代表:排他的な行
より大きな自然数:複数のローがマージされたことを示します.
0:「消える」のどのセルを表し、後ろのセルを前に1つ押す