需求
对表格的列可进行拖动,隐藏
解决方式
el-table 官方文档里面并没有可以让table 拖动的实例,那么我们就要用到第三方JavaScript库: Sortable.js 它允许您轻松地使网页中的元素（如列表项、表格行等）可拖动并重新排序。Sortable.js 具有简洁的 API 和良好的兼容性，能为用户提供直观和交互性强的排序体验。
使用Sortable.js
下载
npm install sortablejs --save
在界面引用
import Sortable from "sortablejs";
示例代码
<template>
<div class="app-container">
<el-table
v-loading="loading"
:height="height"
:data="orderdatatableList"
@select="select"
@select-all="selectAll"
ref="multipleTable"
v-el-table-infinite-scroll="load"
border
:key="tableKey"
:row-key="
(row) => {
return row.id;
}
"
>
<el-table-column type="selection" width="75" align="center" fixed />
<el-table-column
v-for="(item, index) in columnslist"
v-if="item.isCheck"
:key="index"
:label="item.label"
:prop="item.prop"
align="center"
>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 列显示设置对话框 -->
<el-dialog :visible.sync="columnSettingVisible" title="列显示设置">
<el-checkbox-group v-model="checkedColumns">
<el-checkbox
v-for="column in columns"
:key="column.prop"
:label="column.prop"
>{{ column.label }}</el-checkbox
>
</el-checkbox-group>
<div slot="footer" class="dialog-footer">
<el-button @click="columnSettingVisible = false">取 消</el-button>
<el-button type="primary" @click="saveColumnSettings">保 存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listFacility,
} from "@/api/system/facility";
import Sortable from "sortablejs";
export default {
name: "Facility",
data() {
return {
checkedColumns: [],
columnSettingVisible: false,
tableKey: 1, // 用于强制重新渲染表格的 key
columnslist: [], //深拷贝出来的行
columns: [
{
prop: "sid",
label: "设备信息表id",
align: "center",
isCheck: true,
},
{
prop: "facilityCode",
label: "设备代码",
align: "center",
isCheck: true,
},
{
prop: "facilityNo",
label: "设备编码",
align: "center",
isCheck: true,
},
{
prop: "facilityDesc",
label: "设备名称",
align: "center",
isCheck: true,
},
{
prop: "proccessNo",
label: "工序号",
align: "center",
isCheck: true,
},
{
prop: "facilityType",
label: "设备分类",
align: "center",
isCheck: true,
},
{
prop: "facilitySimpl",
label: "设备简称",
align: "center",
isCheck: true,
},
{
prop: "sortOrder",
label: "设备排序",
align: "center",
isCheck: true,
},
],
},
created() {
if (localStorage.getItem("columnslist") == null) {
this.columnslist = JSON.parse(JSON.stringify(this.columns));
} else {
//获取
this.columnslist = JSON.parse(localStorage.getItem("columnslist"));
}
this.getList();
},
mounted() {
//表格拖拽方法
this.columnDrop();
},
methods: {
/**
* 列拖拽
*/
columnDrop() {
const _this = this;
console.log("数据", this.columnslist);
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const empty = 1;
// 跳过显示的列数量，如开头我们用了一个多选框
const oldItem = _this.columnslist[evt.oldIndex - empty];
_this.columnslist.splice(evt.oldIndex - empty, 1);
_this.columnslist.splice(evt.newIndex - empty, 0, oldItem);
// 每一次拖拽后都要重绘一次
_this.reDrawTable();
//存储数据
localStorage.setItem(
"columnslist",
JSON.stringify(_this.columnslist)
);
console.log("存储_this.columnslist", _this.columnslist);
},
});
},
/**
* 触发表格重绘
*/
reDrawTable() {
this.tableKey = Math.random();
this.$nextTick(() => {
this.columnDrop();
});
},
// 打开列设置界面并初始化选中状态
openColumnSetting() {
this.columnSettingVisible = true;
//获取
if (localStorage.getItem("columns") == null) {
} else {
this.columns = JSON.parse(localStorage.getItem("columns"));
}
this.checkedColumns = this.columns
.filter((column) => column.isCheck)
.map((column) => column.prop);
// 初始化checkedColumns，根据columns中的visible属性设置
},
saveColumnSettings() {
console.log(this.checkedColumns);
this.columns.forEach((column) => {
const visibleIndex = this.checkedColumns.indexOf(column.prop);
column.isCheck = visibleIndex !== -1;
});
const filteredObjects = this.columns.filter((obj) =>
this.checkedColumns.includes(obj.prop)
);
this.columnslist = filteredObjects;
//存储数据
localStorage.setItem("columns", JSON.stringify(this.columns));
console.log("储存this.columns", this.columns);
//存储数据
localStorage.setItem("columnslist", JSON.stringify(this.columnslist));
console.log("存储_this.columnslist", this.columnslist);
// 关闭对话框
this.columnSettingVisible = false;
this.reDrawTable();
},
/** 查询检修信息表列表 */
getList() {
listFacility(this.queryParams).then((response) => {
this.orderdatatableList = this.orderdatatableList;
this.total = response.total;
});
},
},
};
</script>
