el-table 控制列隐藏与展示

最新推荐文章于 2024-07-22 12:29:37 发布

@颜究生

最新推荐文章于 2024-07-22 12:29:37 发布

阅读量1.2k

点赞数 1

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/m0_53871713/article/details/130175301

版权

文章展示了一个Vue.js组件，用于在点击设置图标时弹出一个对话框，用户可以通过对话框中的checkbox选择需要显示的数据列。组件包含HTML结构、JavaScript逻辑和CSS样式，实现了列的勾选状态与表格显示的同步功能。在应用组件时，需要提供要展示的列（tableTitle）和默认勾选的列（checkList）数据。

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

以弹出框的形式勾选需要展示的列

效果如下：

一、组件

html:

<template>
  <div>
    <i
      class="el-icon-setting"
      style="font-size: 22px; cursor: pointer; margin-top: 3px"
      @click="visible = true"
    ></i>
    <!-- 数据列显示与隐藏 -->
    <el-dialog title="显示/隐藏" :visible.sync="visible" width="65%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>选择基本信息显示字段</span>
        </div>
        <div class="region-list-style">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              style="width: 90px; height: 30px; vertical-align: middle"
              v-for="(item, index) in tableTitle"
              :key="index"
              :label="item.title"
              ></el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="checkedChange">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

js:

<script>
export default {
  name: "HideColumn",
  props:{
    PtableTitle: Array,
    data: Array
  },
  data() {
    return {
      // 显示控制列
      visible: false,
      // 保存默认勾选的列
      origin: [],
      // // 默认勾选的列
      checkList: [],
      tableTitle: []
    };
  },
  created() {
    if(this.data){
      this.checkList = this.data
      this.origin = this.checkList;
    }
    if(this.PtableTitle){
      this.tableTitle = this.PtableTitle
    }
  },
  methods: {
    // 重置为默认展示的列
    reset() {
      this.checkList = this.origin;
    },
    // 列的展示与隐藏
    checkedChange() {
      // 首先重置为不展示
      this.tableTitle.forEach((item) => {
        item.open = false;
      });

      for (let i = 0; i < this.checkList.length; i++) {
        this.tableTitle.forEach((item) => {
          if (item.title == this.checkList[i]) {
            item.open = true;
          }
        });
      }
      this.visible = false;
    },
  },
};
</script>

css:

<style scoped>
.cursor {
  cursor: pointer;
}
.cursor:hover {
  color: #f40;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 90%;
}
</style>

二、应用组件

<HideColumn :data="checkList" :PtableTitle="tableTitle"></HideColumn>

定义数据：

      // 控制要展示的列
      tableTitle: [
        { title: "列1", open: true },
        { title: "列2", open: true },
        { title: "列3", open: false},
      ],
      // 默认勾选的列（open为true）
      checkList: [
        "列1",
        "列2",
      ],