效果:
提示:弹窗进行设置列的显示与隐藏、可上下拖拽改变显示顺序
弹窗页面:
提示:可直接复制使用,注意变量要换为你自己定义的变量
<template>
<el-dialog title="设置表格显示列"
width="50%"
top="8vh"
:visible.sync="tableColumnModal"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
class="column-select"
@open="dialogOpen">
<transition-group name="flip-list">
<div v-for="(item,index) in tableColumnSetData" :key="index" draggable="true" :class="[tableColumnSetData.length === (index+1)?'columnSetLast':'columnSet',item.show?'blue-color':'gray-color']" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend">
<el-row>
<el-col :span="21" @click.native="changeShow(item)">
<span style="margin: 0 10px">
<i class="el-icon-check" style="font-size: 16px;"></i>
</span>
<span>{{item.label}}</span>
</el-col>
<el-col :span="3" align="center" style="border-left: 1px solid #e8eaec;">
<a @click="changeShow(item)" :style="{color:(item.show?'#999':'#409EFF'),cursor:'pointer'}">{{ item.show?'隐藏':'显示' }}</a>
</el-col>
</el-row>
</div>
</transition-group>
<template slot="footer">
<el-button-group>
<el-button size="small" @click="tableColumnModal = false">取 消</el-button>
<el-button size="small" type="primary" @click="tableShowColumnSet">确 定</el-button>
</el-button-group>
</template>
</el-dialog>
</template>
样式:
提示:可以自己看看 去掉无用的样式
<style type="text/css" scoped>
[v-cloak] {
display: none
}
.fold {
display: inline-block;
position: absolute;
right: 3px;
}
.fold img {
margin-top: -2px;
}
.fold span:hover {
color: #00a8ff;
}
.search-bg-span {
cursor: pointer;
line-height: 36px;
font-size: 13px;
color: #00a8ff;
}
.no-search-bg-span {
cursor: pointer;
line-height: 36px;
font-size: 13px;
color: grey;
}
.label-sign {
width: 3px;
height: 20px;
background: #00a0e9;
margin-bottom: 0;
margin-top: 10px;
}
.column-select .el-checkbox {
margin-left: 15px !important;
width: 30%;
margin: 10px 1%;
}
.column-select .el-dialog__body {
padding: 10px 10px 20px 10px;
}
.col-setting {
padding: 0 5px;
border-top: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
background: #f8f8f9;
height: 30px;
line-height: 42px;
}
.columnSet {
height: 50px;
line-height: 50px;
border-top: 1px solid #e8eaec;
border-left: 1px solid #e8eaec;
border-right: 1px solid #e8eaec;
}
.columnSetLast {
height: 50px;
line-height: 50px;
border: 1px solid #e8eaec;
}
.blue-color {
color: #00a0e9;
}
.gray-color {
color: #999;
}
</style>
vue:
提示:可直接复制使用,注意变量要换为你自己定义的变量
// 定义用到的变量
data: function () {
//列
const reportBorrowApplyData = [
{ label: '领域', name: "F_UseBranchNo", width: 80, show: true },
{ label: '借阅人', name: "F_BorrowEmpName", width: 90, show: true },
{ label: '借阅时间', name: "F_BorrowDate", width: 100, show: true },
{ label: '报告编号', name: "F_ReportNo", width: 160, show: true },
{ label: '借阅原因', name: "F_BorrowReason", width: 120, show: true },
{ label: '审核人', name: "F_ApproveEmpName", width: 90, show: true },
{ label: '审核时间', name: "F_ApproveDate", width: 90, show: true },
{ label: '状态', name: "F_Status", width: 100, show: true },
{ label: '是否有效', name: "F_EnabledMark", width: 90, show: true },
{ label: '文件路径', name: "F_FilePath", width: 110, show: true },
{ label: '备注', name: "F_Remark", width: 100, show: true },
{ label: '计划归还时间', name: "F_PlanReturnDate", width: 120,show: true },
]
let reportBorrowApplyTableCellArr = JSON.parse(JSON.stringify(reportBorrowApplyData))
return {
tableColumnModal: false,
tableColumnSetData: [],
dragObj: {},
dragEndObj: {},
reportBorrowApplyTableCellArr,
}
}
// 用到的方法
methods: function () {
//设置列的 显示/隐藏
changeShow(item) {
item.show = !item.show
},
// 开始拖拽 (改变列的显示顺序)
dragstart(obj) {
this.dragObj = obj
},
// 记录移动过程中信息
dragenter(obj) {
this.dragEndObj = obj
},
// 做最终操作
dragend(value) {
if (this.dragObj !== this.dragEndObj) {
let oldIndex = this.tableColumnSetData.indexOf(this.dragObj);
let newIndex = this.tableColumnSetData.indexOf(this.dragEndObj);
let newItems = [...this.tableColumnSetData];
// 删除老的节点
newItems.splice(oldIndex, 1);
// 在列表中目标位置增加新的节点
newItems.splice(newIndex, 0, this.dragObj);
// this.items一改变,transition-group就起了作用
this.tableColumnSetData = [...newItems];
}
},
// 打开设置初始页面
dialogOpen() {
let tempColArr = []
tempColArr = JSON.parse(JSON.stringify(this.reportBorrowApplyTableCellArr))
this.tableColumnSetData = tempColArr
},
// 设置
tableShowColumnSet() {
this.tableColumnModal = false;
const tempColArr = JSON.parse(JSON.stringify(this.tableColumnSetData))
this.reportBorrowApplyTableCellArr = tempColArr
window.localStorage.setItem('reportBorrowApplyInfoColDataStr', JSON.stringify(this.tableColumnSetData))
},
}