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", //点击table某一row事件
"CellClassName", //row-background
"tableHeader", //Table头部
"TableList", //Table数据
"Viewmethod", //处理方法
// 'showScope', //显示按钮
"handleSizeChange", //分页：第几页
"handleCurrentChange", //分页：每页显示多少条
"total", //总条数
"buttonList", //循环button
//'scopeWidth', //scope列宽
"showSelection", //是否显示勾选
"isDisabled", //分情况是否禁用按钮：可忽略
"tableRowClassName" //根据状态改变row的底色
],
data() {
return {
scopeWidth: 0,
showScope: false,
multipleSelection: [],
FormTableObj: {
maxResultCount: 10, //第几条结束
skipCount: 1, //从第几条开始
sortDirection: "Asc"
},
tableHeader: this.header, //table
dragState: {
start: -1, // 起始元素的 index
end: -1, // 结束元素的 index
move: -1, // 移动鼠标时所覆盖的元素 index
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 {
// return false;
}
},
// 拖动易位
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);
}
}
},
[
// 添加 <a> 用于显示表头 label
createElement("p", column.label),
// 添加一个空标签用于显示拖动动画
createElement("span", {
class: ["virtual"]
})
]
);
}
},
mounted() {
this.showpermissionId();
}
};
</script>
来源：CSDN
作者：kevin&1990
链接：https://blog.csdn.net/weixin_42396196/article/details/104063549