elementui table实现动态将列固定到左侧(fixed)

最新推荐文章于 2024-09-06 14:01:02 发布

万万没想到0831

最新推荐文章于 2024-09-06 14:01:02 发布

阅读量1.4w

点赞数 1

分类专栏：平时遇到的问题文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_36752632/article/details/102785168

版权

本文介绍了在ElementUI表格上实现列动态固定到左侧的功能，该功能是在列拖拽及动态显示列的基础上增强的。首先，文章建议读者了解v-contextmenu组件的安装和引用。然后，文章提到虽然后端开发前端实现不规范，但主要分享实现思路，代码优化可自行处理。文中通过创建下拉菜单、绑定table的header右键事件以及处理右键事件的方法来阐述实现过程，并提供了完整代码供参考。

摘要由CSDN通过智能技术生成

前言

这个功能是是elementui表格的列拖拽及动态显示列实现基础上进行的功能增强

在开始之前请自行查询v-contextmenu 组件的安装以及全局引用
注：后端开发前端实现并不规范，主要讲个思路，代码优化看你了（如果有可以私信或者评论告诉我，跪谢）

正文

创建下拉菜单

   <div v-show="menuVisible">
            <v-contextmenu ref="contextmenu" id="menu">
                <v-contextmenu-item @click="lock">锁定</v-contextmenu-item>
                <v-contextmenu-item @click="unlock">解锁</v-contextmenu-item>
            </v-contextmenu>
        </div>

2.绑定table的header右键事件：

 <el-table
                v-loading="listLoading"
                :data="list"
                border
                fit
                size="mini"
                :row-class-name="rowClassName"
                :cell-class-name="cellClassName"
                highlight-current-row
                style="width: 100%;margin-top: 20px"
                @selection-change="handleSelectionChange"
                @sort-change="changeSort"
                @header-contextmenu="rightClick"
                ref="filterTable"
        >
            <el-table-column
                    type="selection"
                    fixed="left"
                    width="55">
            </el-table-column>
            <el-table-column type="index" align="center" width="50"   fixed="left">
            </el-table-column>
            <el-table-column v-for="(item, index) in col"
                             v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
                             align="center"
                             :index="index"
                             :sortable="dropCol[index].sort"
                             show-overflow-tooltip
                             :width="dropCol[index].width?dropCol[index].width:'200px'"
                             :key="`col_${index}`"
                             :fixed="dropCol[index].fixed"
                             :prop="dropCol[index].prop"
                             :label="item.label">
                <template slot-scope="scope">
                    <span>{
   {
    !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-dropdown trigger="hover">
            <span class="el-dropdown-link">
              操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息
                            </el-dropdown-item>
                            <!--              <el-dropdown-item class="el-dropdown-link" @click.native="memoryInfo(scope.row)">内存信息</el-dropdown-item>-->
                            <!--              <el-dropdown-item class="el-dropdown-link" @click.native="nicInfo(scope.row)">网卡信息</el-dropdown-item>-->
                            <!--              <el-dropdown-item class="el-dropdown-link" @click.native="diskInfo(scope.row)">硬盘信息</el-dropdown-item>-->
                            <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更
                            </el-dropdown-item>
                            <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产
                            </el-dropdown-item>
                            <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

禁用原有的右键事件

document.oncontextmenu = function(){
   
                return false;
            }

配置列表信息

 let allCols = [
                    {
   prop: "select", label: "选择", sort: true},
                    {
   prop: "index", label: "序号", sort: true},
                    {
   prop: "name", label: "设备型号", sort: true,fixed:false},
                    {
   prop: "cluster.name", label: "集群", type: "cluster", sort: false,fixed:false},
                    {
   prop: "type", label: "服务器分类", sort: true,fixed:false},
                    {
   prop: "sn", label: "设备序列号", sort: true,fixed:false},
                    {
   prop: "manageIp", label: "管理网", sort: true,fixed:false},
                    {
   prop: "illoIp", label: "ILLO地址", sort: true,fixed:false},
                    {
   prop: "period", label: "期数", sort: true,fixed:false},
                    {
   prop: "position", label: "机架位置", sort: true,fixed:false},
                    {
   prop: "publicIp", label: "公网", sort: true,fixed:false},
                    {
   prop: "cn2Ip", label: "CN2", sort: true,fixed:false},
                    {
   prop: "status", label: "状态", type: "status", sort: true,fixed:false},
                    {
   prop: "outIp", label: "存储外网", sort: true,fixed:false},
                    {
   prop: "systemVersion", label: "系统版本", sort: true,fixed:false},
                    {
   prop: "osVersion", label: "内核版本", sort: true,fixed:false},
                    {
   prop: "use", label: "用途", sort: true,fixed:false},
                    {
   prop: "deliveryDate", label: "交付日期", type: "date", sort: true,fixed:false},
                    {
   prop: "resourcePool", label: "资源池", type: "resourcePool", sort: true,fixed:false},
                    {
   prop: "useUser", label: "申请人", sort: true,fixed:false},
                    {
   prop: "tag", label: "项目名称", sort: true,fixed:false},
                    {
   prop: "remarks", label: "备注", sort: true,fixed:false},
                    {
   prop: "computerPosition", label: "机房位置", sort: true,fixed:false},
                    {
   prop: "desc", label: "硬件信息", width: "700px", sort: false,fixed:false},
                ]

右键事件处理方法

//右键点击
            rightClick(column, event) {
    // 鼠标右击触发事件
                this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
                this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
                let menu = document.querySelector('#menu')
                document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
                menu.style.display = "block";
                menu.style.left = event.clientX + 'px'
                menu.style.top = event.clientY + 'px'
                this.index=column.index

            },
            lock(){
   
                this.dropCol[this.index].fixed="left"

            },
            unlock(){
   
                this.dropCol[this.index].fixed=false
            },
            foo() {
    // 取消鼠标监听事件 菜单栏
                let menu = document.querySelector('#menu')
                this.menuVisible = false
                menu.style.display = "none";

                document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
            },

和上篇博客一样，这里附上完整代码，如果拆开看不太懂可以参考完整代码

<template>
    <d2-container>
        <template slot="header">
            <el-form :inline="true" :model="listQuery" ref="searchForm" size="mini" style="margin-bottom: -18px;">
                <el-form-item>
                    <el-button @click="search" size="mini">
                        <d2-icon name="search"/>
                        搜索
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="createDevice">创建资产
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="changeCols">修改显示列
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addHs">添加历史变更</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="saveOrder">保存显示顺序
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="exportRepair">导出设备信息
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addTag">增加标签</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload
                            :action="deviceUrl"
                            :show-file-list=false
                            :on-success="handleAvatarSuccess"
                    >
                        <el-button size="mini" type="primary" icon="el-icon-circle-plus">

                            导入
                        </el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </template>
<!--        //@header-contextmenu="rightClick"-->
        <el-table
                v-loading="listLoading"
                :data="list"
                border
                fit
                size="mini"
                :row-class-name="rowClassName"
                :cell-class-name="cellClassName"
                highlight-current-row
                style="width: 100%;margin-top: 20px"
                @selection-change="handleSelectionChange"
                @sort-change="changeSort"
                @header-contextmenu="rightClick"
                ref="filterTable"
        >
            <el-table-column
                    type="selection"
                    fixed="left"
                    width="55">
            </el-table-column>
            <el-table-column type="index" align="center" width="50"   fixed="left">
            </el-table-column>
            <el-table-column v-for="(item, index) in col"
                             v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
                             align="center"
                             :index="index"
                             :sortable="dropCol[index].sort"
                             show-overflow-tooltip
                             :width="dropCol[index].width?dropCol[index].width:'200px'"
                             :key="`col_${index}`"
                             :fixed="dropCol[index].fixed"
                             :prop="dropCol[index].prop"
                             :label="item.label">
                <template slot-scope="scope">
                    <span>{
   {
    !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
                </template