vue+elementui实现多功能table（拖拽、点击、状态变色等）
<template>
<div class="form_table">
<div class="w-table" :class="{'w-table_moving': dragState.dragging}">
<el-table
stripe
:ref
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="TableList"
:border="tableOption.border"
:height="tableOption.minHeight"
:max-height="tableOption.maxHeight"
:style="{ width: parseInt(tableOption.width)+'px' }"
:header-cell-class-name="headerCellClassName"
@selection-change="handleSelectionChange"
v-loading="loading"
element-loading-text="加载中..."
:cell-style="CellClassName"
:row-class-name="tableRowClassName"
@row-click="RowClick"
>
<el-table-column
v-if="showSelection"
fixed="left"
type="selection"
label="全选"
prop="supplierid"
align="center"
></el-table-column>
<el-table-column type="index" label="序号" width="50px" align="center" fixed="left">
<template slot-scope="scope">
<span>{
{
scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column
sortable
v-for="(col, index) in tableHeader"
:key="index"
align="center"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
:type="col.type"
:header-align="col.headerAlign"
:column-key="index.toString()"
:render-header="renderHeader"
:formatter="col.formatter"
show-overflow-tooltip
></el-table-column>
<el-table-column
fixed="right"
label="操作"
:min-width="scopeWidth"
align="center"
v-if="showScope"
>
<template slot-scope="scope">
<el-button
v-for="(item,index) in buttonList"
:key="index"
@click.native.prevent="Viewmethod(scope.$index, scope.row,item.mark)"
:type="item.type"
size="mini"
v-if="$util.hasPermission(item.permissionId)"
plain
>{
{
item.name }}</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
background
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="FormTableObj.skipCount"
:page-sizes="[10, 30, 50, 100]"
:page-size="FormTableObj.maxResultCount"
layout="sizes, prev, pager, next"
:total="total"
></el-pagination>
</div>
</template>
<script>
export default {
props: [
"RowClick",
"CellClassName",
"tableHeader",
"TableList",
"Viewmethod",
"handleSizeChange",
"handleCurrentChange",
"total",
"buttonList",
"showSelection",
"isDisabled",
"tableRowClassName"
],
data() {
return {
scopeWidth: 0,
showScope: false,
multipleSelection: [],
FormTableObj: {
maxResultCount: 10,
skipCount: 1,
sortDirection: "Asc"
},
tableHeader: this.header,
dragState: {
start: -1,
end: -1,
move: -1,
dragging: false,
direction: undefined
},
tableOption: {
border: true,
minHeight: 555
}
};
},
watch: {
header(val, oldVal) {
this.tableHeader = val;
}
},
methods: {
showpermissionId() {
if (this.buttonList) {
this.buttonList.map(p => {
if (this.$util.hasPermission(p.permissionId)) {
this.showScope = true;
this.scopeWidth += 90;
}
});
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
headerCellClassName({
column, columnIndex }) {
return columnIndex - 1 === this.dragState.move
? `darg_active_${
this.dragState.direction}`
: "";
},
handleMouseDown(e, column) {
e.cancelBubble = false;
e.stopPropagation();
this.table_column_resizable = false;
this.dragState.dragging = true;
this.dragState.start = parseInt(column.columnKey);
let table = document.getElementsByClassName("w-table")[0];
let virtual = document.getElementsByClassName("virtual");
for (let item of virtual) {
item.style.height = table.clientHeight - 1 + "px";
item.style.width = item.parentElement.parentElement.clientWidth + "px";
}
return false;
},
handleMouseUp(e, column) {
if (!this.dragState.dragging) {
return;
}
e.cancelBubble = false;
e.stopPropagation();
this.dragState.end = parseInt(column.columnKey);
this.dragColumn(this.dragState);
window.setTimeout(() => {
this.table_column_resizable = true;
}, 500);
this.dragState = {
start: -1,
end: -1,
move: -1,
dragging: false,
direction: undefined
};
return false;
},
handleMouseMove(e, column) {
this.table_column_resizable = false;
if (this.dragState.dragging) {
e.cancelBubble = false;
e.stopPropagation();
let index = parseInt(column.columnKey);
if (index - this.dragState.start !== 0) {
this.dragState.direction =
index - this.dragState.start < 0 ? "left" : "right";
this.dragState.move = parseInt(column.columnKey);
} else {
this.dragState.direction = undefined;
}
return false;
} else {
}
},
dragColumn({
start, end, direction }) {
let tempData = [];
let left = direction === "left";
let min = left ? end : start - 1;
let max = left ? start + 1 : end;
for (let i = 0; i < this.tableHeader.length; i++) {
if (i === end) {
tempData.push(this.tableHeader[start]);
} else if (i > min && i < max) {
tempData.push(this.tableHeader[left ? i - 1 : i + 1]);
} else {
tempData.push(this.tableHeader[i]);
}
}
this.tableHeader = tempData;
},
renderHeader(createElement, {
column }) {
return createElement(
"div",
{
style: {
cursor: "move"
},
class: ["thead-cell"],
on: {
mousedown: $event => {
this.handleMouseDown($event, column);
},
mouseup: $event => {
this.handleMouseUp($event, column);
},
mousemove: $event => {
this.handleMouseMove($event, column);
}
}
},
[
createElement("p", column.label),
createElement("span", {
class: ["virtual"]
})
]
);
}
},
mounted() {
this.showpermissionId();
}
};
</script>
