Vue Table表格动态展示列 Table表格自定义显示列 动态设置列是否展示 可拖拽设置列的显示顺序

效果：

提示：弹窗进行设置列的显示与隐藏、可上下拖拽改变显示顺序

---

弹窗页面：

提示：可直接复制使用，注意变量要换为你自己定义的变量

 <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

---

样式：

提示：可以自己看看 去掉无用的样式

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

---

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))
     },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69