element-ui表格很强，但是业务需求更强大，需要表格整列移动，并且整列隐藏
<template>
<div>
<el-form>
<el-form-item class="isHide">
<el-popover placement="bottom" width="300" trigger="click">
<el-col :span="20">
<h4>请选择需要隐藏的内容</h4>
</el-col>
<el-col :span="12" v-for="(item,index) in _col" :key="index">
<el-checkbox
:value="item.isHidden"
@change="(val) => {showHide(item, index, val);}"
>{{item.label}}</el-checkbox>
</el-col>
<el-button
slot="reference"
type="primary"
plain
class="setting"
style="margin-right:10px"
>设置</el-button>
</el-popover>
<el-button type="primary" @click="saveAry" plain>保存设置</el-button>
</el-form-item>
</el-form>
<div class="tableCommon">
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:cell-class-name="cellClassName"
:header-cell-class-name="headerCellClassName"
@header-dragend="change()"
class="drag_table"
:row-class-name="tableRowClassName"
@selection-change="changeFun"
v-loading="loading"
element-loading-text="加载中..."
:header-cell-style="{background:'rgb(238, 241, 246)',color:'rgb(96, 98, 102)'}"
border
@row-click="clickSelect"
>
<slot></slot>
<el-table-column
v-for="(_col, index) in _tableHeader"
:key="index"
:prop="_col.prop"
:label="_col.label"
:column-key="index.toString()"
:render-header="renderHeader"
:show-overflow-tooltip="true"
v-if="!col_hide_flat[ index]"
min-width="50px"
align="center"
sortable
></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import Cookies from "js-cookie";
export default {
name: "table123",
props: {
tableData: {
default: []
},
tableHeader: {
default: []
},
col: {
default: []
}
},
data() {
return {
clickSelectList: {}, //行点击
userId: null,
tableName: "",
_tableHeader: [],
_col: [],
loading: false,
deep_clone_ary: [],
col_hide_flat: [], //活动表头，隐藏表头
checkBoxData: [],
dragState: {
startIndex: -1, // 拖动起始元素的index
endIndex: -1, // 拖动结showHide束元素的index
afterMoveIndex: -1, // 拖动后元素的index
dragging: false, // 是否正在拖动
direction: null, // 拖动方向
moveTableOutsideBack: false // 拖出到table外之后又拖回来
},
userInfo: {
userId: null,
username: "",
name: "",
enterpriseId: 0,
enterpriseName: ""
}
};
},
methods: {
// 行点击
clickSelect(val) {
this.clickSelectList = val;
bus.$emit("clickSelect", this.clickSelectList);
},
//隐藏表格头
init() {
let param = {
tableName: this.tableName
};
TAPI.list(param)
.then(
rel => {
// console.log(rel, 111);
if (rel.code == 0 && rel.list.length > 0) {
let newtable = [];
let table = rel.list;
table.forEach(item => {
let entity = {
prop: item.columnName,
label: item.columnComment,
isHidden: item.isHidden == 2 ? true : false,
checked: item.isHidden == 2 ? true : false
};
newtable.push(entity);
});
this._tableHeader = newtable;
this._col = newtable;
// console.log(this._col,3333333333333333);
let num = 0;
this._tableHeader.forEach(e => {
this.$set(this.col_hide_flat, num, e.isHidden);
num++;
});
}
},
err => {
this.$message.error({
showClose: true,
message: err.toString(),
duration: 2000
});
}
)
.catch(error => {
this.$message.error({
showClose: true,
message: "请求出现异常",
duration: 2000
});
});
},
//隐藏表格列
saveAry() {
this.deep_clone_ary = [];
// console.log(this._tableHeader,12121);
let num = 1;
this._tableHeader.forEach(item => {
let entity = {
tableName: this.tableName,
columnName: item.prop,
columnComment: item.label,
sort: num,
isHidden: item.isHidden == true ? 2 : 1,
userId: this.userId
};
this.deep_clone_ary.push(entity);
num++;
});
TAPI.insertBatch(this.deep_clone_ary)
.then(
result => {
if (result.code === 0) {
this.init();
this.$message.success({
message: result.msg,
duration: 2000
});
}
},
err => {
this.$message.error({
showClose: true,
message: err.toString(),
duration: 2000
});
}
)
.catch(error => {
this.$message.error({
showClose: true,
message: "请求出现异常",
duration: 2000
});
});
},
changeFun(val) {
this.checkBoxData = val;
bus.$emit("checkBoxData", this.checkBoxData);
},
// 表格隔行变色
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return "warning-row";
} else {
return "success-row";
}
},
//隐藏表格头
showHide(show, _index, val) {
this.$set(this.col_hide_flat, _index, val);
// console.log(_index, val,'val');
this._tableHeader[_index].isHidden = val;
this._col[_index].isHidden = val;
return;
},
/*
* @params:
* Description: 表格拖动
*/
// drag_table在渲染表头时调用
renderHeader(h, { column, $index }) {
// 这里可以根据$index的值来对自身需求进行修改，
return h(
"span",
{
class: ["thead-cell"],
style: {
// display: "block",
// width: "40px",
cursor: "move"
},
on: {
mousedown: $event => {
this.handleMouseDown($event, column);
},
mouseup: $event => {
this.handleMouseUp($event, column);
},
mousemove: $event => {
this.handleMouseMove($event, column);
}
}
},
[
h("span", [
// 给每个表头添加icon 可以不需要
h("span"),
h("span", column.label)
]),
// 给每个表头添加一个class=virtual 是画虚线的类名。
h("span", {
class: ["virtual"]
})
]
);
},
// 按下鼠标开始拖动 设置列的背景色
handleMouseDown(e, column) {
// 判断是鼠标左键
if (e.button === 0) {
this.dragState.dragging = true;
this.dragState.startIndex = parseInt(column.columnKey);
// 给当前要拖动列的th设置class
document.querySelectorAll(".drag_table table thead tr th")[
this.dragState.startIndex
].className += " " + "dragging_column";
// 给拖动时的虚拟容器添加宽高
let table = document.getElementsByClassName("drag_table")[0];
let virtual = document.getElementsByClassName("virtual");
// 设置新插入的span.virtual的标签 每一列的宽度、高度
for (let item of virtual) {
item.style.height = table.clientHeight - 10 + "px";
item.style.width =
item.parentElement.parentElement.clientWidth + "px";
}
this.dragState.moveTableOutsideBack = false;
}
},
// 拖动中
handleMouseMove(e, column) {
// 判断是鼠标左键
if (e.button === 0) {
if (this.dragState.dragging) {
let currentIndex = parseInt(column.columnKey); // 拖动的当前列index
if (currentIndex !== this.dragState.startIndex) {
this.dragState.direction =
currentIndex - this.dragState.startIndex < 0 ? "left" : "right"; // 判断拖动方向
this.dragState.afterMoveIndex = currentIndex;
} else {
this.dragState.direction = null;
}
} else {
return false;
}
}
},
// 鼠标放开结束拖动
handleMouseUp(e, column) {
// 判断是鼠标左键
if (e.button === 0) {
// 拖出当前table外之后又拖回来，不再进行易位操作（拖出去时已处理）
if (this.dragState.moveTableOutsideBack) {
return false;
} else {
this.dragState.endIndex = parseInt(column.columnKey); // 记录结束列index
if (this.dragState.startIndex !== this.dragState.endIndex) {
this.dragColumn(this.dragState);
}
this.finishDragInit();
}
}
// console.log(this.dragState.endIndex, 'drageStar')
},
// 拖动到当前table之外的处理
moveTableOutside() {
if (this.dragState.dragging) {
this.dragState.endIndex = this.dragState.startIndex;
if (this.dragState.startIndex !== this.dragState.endIndex) {
this.dragColumn(this.dragState);
}
this.finishDragInit();
this.dragState.moveTableOutsideBack = true;
}
},
// 拖动易位
dragColumn({ startIndex, endIndex, direction }) {
// 排除掉鼠标点击table外面，然后拖入进table报错
if (startIndex < 0) {
return;
}
// 判断是向左移动还是向右移动
// 把移动的列插在某个列前面或者后面，然后在删除移动的列
if (direction === "left") {
this._tableHeader.splice(endIndex, 0, this._tableHeader[startIndex]);
this._tableHeader.splice(startIndex + 1, 1);
} else {
this._tableHeader.splice(
endIndex + 1,
0,
this._tableHeader[startIndex]
);
this._tableHeader.splice(startIndex, 1);
}
// console.log(startIndex, ';endIndex');
// console.log(startIndex, ';endIndex');
},
// 拖动完成后的初始化
finishDragInit() {
// 给当前要拖动列的th取消class
for (var item of document.querySelectorAll(
".drag_table table thead tr th"
)) {
item.className = String(item.className)
.split("dragging_column")
.join("");
}
// 再次初始化拖动状态
this.dragState = {
startIndex: -1,
endIndex: -1,
afterMoveIndex: -1,
dragging: false,
direction: null,
moveTableOutsideBack: false
};
},
headerCellClassName({ column, columnIndex }) {
return columnIndex === this.dragState.afterMoveIndex
? `drag_active_${this.dragState.direction}`
: "";
},
// 动态给表头单元格th添加class，实现拖动中的背景
cellClassName({ column, columnIndex }) {
return columnIndex === this.dragState.startIndex ? `dragging_column` : "";
},
change() {}
},
created() {
this.col_hide_flat.length = 100;
this._tableHeader = this.tableHeader;
this._col = this.col;
},
mounted() {
//表格头名的处理，因为要求不同，所有拿url地址进行处理
this.userInfo = JSON.parse(Cookies.get("userInfo"));
this.userId = this.userInfo.userId;
this.tableName = this.$route.path
.substring(11)
.replace(/\//g, "-")
.replace(/\+/g, "-") ;
this.init();
}
};
</script>
<style scoped>
.isHide {
display: inline-block;
}
</style>
引入表格使用
import myTable from "../commonComponents/table";
components: { "my-table": myTable },
<my-table :table-data="表格数据" :tableHeader="tableHeader" :col="col"></my-table>
//表格头
tableHeader: [
{
label: "流水",
prop: "productCode",
showif: "show_productCode",
isHidden: false
},
{
label: "最",
prop: "most",
showif: "show_most",
isHidden: false
},
{
label: "时间",
prop: "time",
showif: "show_time",
isHidden: false
}
],
//隐藏头
col: [
{
label: "流水",
prop: "productCode",
showif: "show_productCode",
isHidden: false
},
{
label: "最",
prop: "most",
showif: "show_most",
isHidden: false
},
{
label: "时间",
prop: "time",
showif: "show_time",
isHidden: false
}
]