element 可以拖动、显示隐藏表格列

最新推荐文章于 2025-07-01 14:44:18 发布

zhuhongjin0610

最新推荐文章于 2025-07-01 14:44:18 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lianxin19900610/article/details/89704266

前端专栏收录该内容

51 篇文章

订阅专栏

这是一个使用 Element UI 构建的表格示例，展示了如何实现表格列的拖动以及根据需求显示或隐藏表格列。通过监听 selection-change 事件处理选中行的变化，并在操作列中提供了启用和禁用的按钮。同时，实现了表格头过滤功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        v-for="(item, key, index) in tableData[0]"
        :label="tableHead[index].text"
        :fixed="tableHead[index].fixed"
        :align="tableHead[index].align"
        :prop="key"
        :width="tableHead[index].width"
        v-if="show[index].label">
      </el-table-column>
      <el-table-column
        fixed="right"
        class="edit"
        prop="tag"
        label="操作"
        width="200"
        align="center"
        :render-header="renderHeader"
        :filters="tableHead"
        :filtered-value="tableHeadValue">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="on">启用</el-button>
          <el-button type="text" size="small" class="off">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getPage"/>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'

  export default {
    data() {
      return {
        show: [],
        multipleSelection: [],
      }
    },
    props: ["tableHead", "tableData", "tableHeadValue", "total", "listQuery"],
    components: {Pagination},
    created() {
      for (let i = 0; i <= this.tableHeadValue.length; i++) {
        let item = {label: true};
        this.show.push(item);
      }
    },
    methods: {
      renderHeader(h) {
        let self = this;
        let bin3 = document.getElementsByClassName("el-checkbox-group el-table-filter__checkbox-group");
        if (bin3.length != 0) {
          for (let c = 0; c < bin3.length; c++) {
            let btn = bin3[c].getElementsByClassName("el-checkbox__label");
            for (let i = 0; i < btn.length; i++) {
              let btn1 = btn[i];
              btn1.setAttribute("index", i);
              btn1.onclick = function (e) {
                self.show[this.getAttribute("index")].label = !self.show[this.getAttribute("index")].label;
                e.stopPropagation();
              };
            }
          }
        }
        return h("span", {domProps: {innerHTML: `操作`}});
      },
      formatter(row, column) {
        return row.address;
      },
      getPage(x) {
        this.$emit("pageNumber", x);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      }
    }
  }


</script>
<style lang="scss">
  .el-table-filter__bottom {
    display: none;
  }

  .table {
    .edit {
      min-width: 100px;
    }

    .el-button--small {
      margin: 0;
      padding: 0 5px;
      border-left: 1px solid #ccc;
    }

    .el-button--small:first-child {
      border-left: none;
    }

    .on {
      color: #13ce66;
    }

    .off {
      color: #ff4949;
    }

    .el-table th > .cell.highlight {
      color: #909399;
    }

    .is-leaf {
      .el-icon-arrow-down:before,
      .el-icon-arrow-up:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }

      .el-icon-arrow-down:before {
        background: url("../../assets/table/hide.svg") no-repeat left center;
      }

      .el-icon-arrow-up:before {
        background: url("../../assets/table/show.svg") no-repeat left center;
      }
    }

  }

  .el-checkbox {
    position: relative;
  }

  .el-checkbox__label {
    position: absolute;
    padding-left: 30px;
    left: 0;
    z-index: 2;
  }
</style>