1. Table row drag effect implementation
<el-table
:data="tableSortData"
border
style="min-height: 50px; margin-top: 30px"
max-height="440"
row-key="id"//This is the key point
>
</el-table>
npm i sortablejs
import Sortable from "sortablejs";
//Drag and drop rows
rowDrop() {
this.$nextTick(() => {
const tbody = document.querySelector(
".el-table__body-wrapper tbody"
);
const _this = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
if (newIndex == oldIndex) return;
_this.tableSortData.splice(
newIndex,
0,
_this.tableSortData.splice(oldIndex, 1)[0]
);
var newArray = _this.tableSortData.slice(0);
_this.tableSortData = [];
// setTimeout(() => {
// _this.tableSortData = newArray;
// }, 5);
//If there is asynchronous data, you can call this method to try to obtain the data.
_this.$nextTick(function () {
_this.tableSortData = newArray;
});
},
});
});
},
2.Union of table rows and columns
<div class="contentMinHeight">
<el-table
:data="tableData"
border
style="min-height: 50px"
max-height="440"
:cell-style="cellStyle"
:span-method="objectSpanMethod"
>
<template v-for="(item, index) in tableCols">
<el-table-column
:key="index"
:prop="item.prop"
:fixed="item.fixed"
:resizable="false"
:align="item.align ? item.align : 'center'"
:label="item.label"
min-width="120"
/>
</template>
</el-table>
</div>
//Cell setting style
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (
row.name == "xxxx" ||
row.name == "yyyy" ||
) {
return "background:rgb(222,225,230) !important";
}
} else if (columnIndex == 1) {
if (row.subame == "" || row.geame == "") {
return "background:rgb(222,225,230) !important";
}
} else if (columnIndex == 2) {
if (row.branchName == "") {
return "background:rgb(222,225,230) !important";
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//Merge columns
if (columnIndex === 0) {
if (
row.masterName == "xxxx" ||
row.masterName == "yyyy" ||
row.masterName == "zzzz"
) {
return [1, 2];
} else {
const rowSpan = this.rowSpanArr[rowIndex];
return {
rowspan: rowSpan, //row
colspan: 1, //column
};
}
} else if (columnIndex == 1) {
if (
row.masterName == "aaaaa" ||
row.masterName == "bbbb" ||
row.masterName == "cccc"
) {
return [0, 0];
}
}
},
mounted() {
this.handleTableData(this.tableData);
//Table data merging processing
}
// Get the number of the same name tableData: table data, projectName: determine the same parameters
handleTableData(tableData) {
let rowSpanArr = [],
position = 0;
for (let [index, item] of tableData.entries()) {
if (index == 0) {
rowSpanArr.push(1);
position = 0;
} else {
if (this.isClick == 0) {
if (item.masterName == tableData[index - 1].masterName) {
rowSpanArr[position] + = 1; //The items have the same name and are merged into the same array
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
} else if (this.isClick == 1) {
if (
item.financialInstitutionType ==
tableData[index - 1].financialInstitutionType
) {
rowSpanArr[position] + = 1; //The items have the same name and are merged into the same array
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
} else if (this.isClick == 2) {
if (item.masterName == tableData[index - 1].masterName) {
rowSpanArr[position] + = 1; //The items have the same name and are merged into the same array
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
}
}
}
this.rowSpanArr = rowSpanArr;
},
3.table comes with hidden scroll bars and custom scroll bars (can be used for merging multiple tables)
<div class="contentMinHeight">
<el-table
:data="tableData"
>
</el-table>
</div>
/deep/.el-table--scrollable-x .el-table__body-wrapper {
overflow-x: visible;
}
/deep/.el-table__body-wrapper,
/deep/.el-table__header-wrapper,
/deep/.el-table__footer-wrapper {
overflow: visible;
}
.contentMinHeight .el-table {
overflow: auto;
}
.contentMinHeight .el-table::after {
position: relative !important;
}
4.Table data is arranged vertically
<el-table
:data="getValues"
:show-header="false"
:cell-style="cellStyle"
border
style="min-height: 50px"
max-height="440"
>
<el-table-column
stripe
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>
computed: {
getHeaders() {
return this.basiInfoList.reduce(
(pre, cur, index) => pre.concat(`value${index}`),
["title"]
);
},
getValues() {
return this.tableColsBsic.map((item) => {
return this.basiInfoList.reduce(
(pre, cur, index) =>
Object.assign(pre, { ["value" + index]: cur[item.prop] }),
{ title: item.label }
);
});
},
},