This is the 21st day of my participation in the August Text Challenge.More challenges in August
1. Display of effect drawings
2. Concrete implementation (take merge behavior example)
2.1 Implementation Roadmap
In the table component, a property is provided :span-method, which is a Function with four parameters: row, rowIndex, column, columIndex; These four values can be taken directly. We first process the values of consecutive identical columns, mark them, and then, in the merge method, we go to the corresponding merge rows or columns based on the array we’ve processed.
2.2 Complete Code
<template>
<div class>
<el-table
:data="listData"
:span-method="objectSpanMethod"
border
class="tableArea"
style="width: 40%;"
>
<el-table-column label="Category of Goods" prop="productType" align="center" width="200"></el-table-column>
<el-table-column label="Quantity of Goods" prop="amount" align="center"></el-table-column>
<el-table-column label="Commodity prices" prop="price" align="center"></el-table-column>
<el-table-column label="Trade Name" prop="productName" width="200px" align="center"></el-table-column>
<el-table-column label="Update Time" prop="updateTime" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
listData: [].testArr1: [].testArr2: [].testPosition1: 0.testPosition2: 0}; },methods: {
// Get data
queryData() {
this.listData = [
{
id: "201808300001".productType: "Textiles".amount: 20.productName: "Coat".price: "80".updateTime: "2018-08-30"}, {id: "201808300002".productType: "Textiles".amount: 20.productName: "Pants".price: "76".updateTime: "2018-08-31"}, {id: "201808300003".productType: "Leather products".amount: 100.productName: "Bag".price: "150".updateTime: "2018-08-31"}, {id: "201808300004".productType: "Leather products".amount: 180.productName: "Shoes".price: "76".updateTime: "2018-08-29"}, {id: "201808300005".productType: "Silk".amount: 80.productName: "Cheongsam".price: "106".updateTime: "2018-08-31"}, {id: "201808300006".productType: "Textiles".amount: 20.productName: "Skirt".price: "36".updateTime: "2018-08-30"}, {id: "201808300007".productType: "Textiles".amount: 80.productName: "Short sleeves".price: "36".updateTime: "2018-08-30"}, {id: "201808300008".productType: "Textiles".amount: 20.productName: "Short sleeves".price: "36".updateTime: "2018-08-30"}, {id: "201808300009".productType: "Leather products".amount: 20.productName: "Wallet".price: "60".updateTime: "2018-08-30"}, {id: "201808300011".productType: "Textiles".amount: 90.productName: "Gloves".price: "60".updateTime: "2018-08-30"}, {id: "201808300012".productType: "Textiles".amount: 90.productName: "Socks".price: "36".updateTime: "2018-08-30"}, {id: "201808300013".productType: "Drink".amount: 100.productName: "Sprite".price: "5".updateTime: "2018-08-31"}, {id: "201808300013".productType: "Textiles".amount: 100.productName: "Trench coat".price: "50".updateTime: "2018-08-31",},];this.rowspan(this.testArr1, this.testPosition1, "productType");
this.rowspan(this.testArr2, this.testPosition2, "amount");
},
rowspan(spanArr, position, spanName) {
this.listData.forEach((item, index) = > {
if (index === 0) {
spanArr.push(1);
position = 0;
} else {
if (
this.listData[index][spanName] ===
this.listData[index - 1][spanName]
) {
spanArr[position] += 1;
spanArr.push(0);
} else {
spanArr.push(1); position = index; }}}); },// Table merges rows
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.testArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 1) {
const _row = this.testArr2[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col, }; }}},mounted() {
this.queryData(); }};</script>
Copy the code2.3 Details
The rowSpan () function is used to return the spanArr array, defining the rowSpan for each rowif( index === 0), the first line directly pushes an array1Position is the position of the array element (starting from the first array element, so position is0), the position of0That means the first element of the array. When index is zero2The time,if(this.listData[index][spanName] === this.listData[index-1][spanName]) to compare the second line with the first:1Position + if the second line is equal to the first1, if there are n rows with the same first row, position is n, indicating that n rows are merged downward. The second line itself is spanarr.push (0), indicating that the second line "disappears" because the first and second lines are merged; (2If the second line is not equal to the first, then spanarr.push (1); Let the second row have its own row; Position = index: Take the pointer to the index line to set the element value of the array spanArr[position], and then define how many lines to merge from this line down2When the position is zero2, when the index3, the fourth and third lines need to be merged, so the position element in the array needs to +1SpanArr [position] +=1)Copy the code:span-method="objectSpanMethod"ObjectSpanMethod {row, column, rowIndex, columnIndex}row: the current linecolumnRowIndex: current row number columnIndex: current column number This function returns an array containing two elements, the first representing RowSPAN and the second representing ColSPAN. You can also return an object with keys named RowSPAN and ColSPAN.const _col = _row > 0 ? 1 : 0; Define the cell column merge, our project only merge rows, not parallel; _ROW: indicates the number of rows that are merged. The value of _row is either1Or a larger natural positive integer, or0.1Represents: monopolizes one line of larger natural numbers: represents merges several lines0: represents the cell that "disappears", the following cell is pushed forward one spaceCopy the code3. There are problems
Of course there are small bugs, when you move the mouse to the above hover is not accurate, of course there must be a way to drop
cell-mouse-enter cell-mouse-leave cell-class-name
Copy the codeThese three official methods can be effectively modified, but I still do not understand, I will not present the gaffes, you can first study.