【element ui vue 表格每一列动态固定,点击图标切换锁定与解锁】

最新推荐文章于 2024-08-07 18:33:28 发布

Ritaaaaaaaaaaaaaa

最新推荐文章于 2024-08-07 18:33:28 发布

阅读量189

点赞数 2

分类专栏： vue 文章标签： javascript elementui vue

本文链接：https://blog.csdn.net/weixin_44302901/article/details/140635332

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

element ui vue 表格每一列动态锁定与解锁,点击图标切换锁定与解锁

在表头增加属性fixed，动态赋值ture或flase(锁定与解锁)

<el-table-column prop="num" label="序号" width="80" :fixed="fixed1"> 
</el-table-column>

在data里定义

export default {
  data() {
    return {
      fixed: false,
      }
     }
   }

3.在表头里插入图标，注意我这里用的图片，路径要用require，否则图片加载不出来，这里图标路径可以换成你的路径

<template slot="header">
            <div class="custom-header" style="position: relative;">
              序号
              <img style="width: 20px; height: 20px;position: absolute;right: 0;" :src="fixed1 ? require('../../../assets/icons/close.png') : require('../../../assets/icons/open.png')" @click="toggleLock" />
            </div>
          </template>

4.点击图标事件

methods: {
    toggleLock() {
            this.fixed = !this.fixed
            }
    }

5.效果图
锁定状态解锁状态
5.完整代码

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe >
  <el-table-column prop="num" label="序号" width="80" :fixed="fixed1">
          <template slot="header">
            <div class="custom-header" style="position: relative;">
              序号
              <img style="width: 20px; height: 20px;position: absolute;right: 0;" :src="fixed1 ? require('../../../assets/icons/close.png') : require('../../../assets/icons/open.png')" @click="toggleLock(1)" />
            </div>
          </template>
        </el-table-column>
</el-table>
<script>
export default {
  name: "Request",
  data() {
    return {
      fixed: false,
      tableData: [{num: '1',},{num: '2',}],
    }
    },
    methods: {
    toggleLock {
       this.fixed = !this.fixed
    }
   }
 }
   </script>