vue2表格显隐列的封装【升级缓存版】

news2024/9/20 9:36:30

背景

我们知道，若依后台有列表页、表格字段有显隐列的功能，但是，页面一旦刷新，就又回到初始状态了，但是有时候我们想要刷新后也保留我们设置的显隐列，就需要自己封装了
若依显隐列示例图如下：
在这里插入图片描述

源码

效果展示

效果图如下，点击设置显隐列图标，弹框设置界面，点击修改后会保存设置，刷新后按照我们的设置来显示，即缓存版
在这里插入图片描述

使用方法

1. 在合适的位置（一般在表格上方）放置显隐列组件，该组件默认只展示一个图标，图标可自定义
1. 为表格的字段添加v-if判断，详见下图
1. 在data()中设置默认的展示字段

data() {
  return {
     // 需要展示的字段
	 checkList: [], 
	 // 字段信息，弹框中展示用的
	 fieldDisplayList: [
	   { label: "缺陷编号", prop: "dangerCode", },
	   { label: "缺陷类型", prop: "dangerType", },
	   { label: "缺陷分类", prop: "dangerCategory", },
	   { label: "缺陷状态", prop: "step", },
	   { label: "缺陷等级", prop: "dangerLevel", },
	   { label: "上报内容", prop: "dangerContent", },
	   { label: "缺陷位置", prop: "startAxis", },
	   { label: "上报人", prop: "reportName", },
	   { label: "上报时间", prop: "reportTime", },
	],
  }	
}

1. 在created()中设置默认初始为全部显示即可

this.fieldDisplayList.map((f) => {
  this.checkList.push(f.prop);
});

源码

<template>
  <div>
    <el-tooltip effect="dark" content="设置展示字段">
      <img class="field-setting" @click="showDialog = true" src="@/assets/images/fieldSetting.jpg" alt="设置展示字段">
    </el-tooltip>

    <el-dialog
      title="设置展示字段"
      :visible.sync="showDialog"
      :close-on-press-escape="false"
      :width="width"
      append-to-body
      v-dialog-drag
    >
      <el-row :gutter="gutter">
        <el-checkbox-group v-model="checkArray">
<!--          :key="index"-->
          <template v-for="(item,index) in list">
            <el-col :span="item.elCol || elCol" v-if="item.hide !== true">
              <el-checkbox :label="item.prop" :disabled="false">{{ item.label }}</el-checkbox>
            </el-col>
          </template>
        </el-checkbox-group>
      </el-row>
      <template v-slot:footer>
        <el-button @click="submits" type="primary">修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 名称
    name:{
      type: String,
      default: () => '',
    },
    /**
     * 所有显示字段的列表
     * 格式： {
     *   prop: 唯一键名，
     *   label: 显示的名称
     *   hide: 是否隐藏，默认不填不隐藏，为true时隐藏
     * }
     * */
    list: {
      type: Array,
      default: () => [],
    },
    // 默认显示的主要字段列表
    defaultCheckList: {
      type: Array,
      default: () => [],
    },
    gutter: {
      type: Number,
      default: () => 10,
    },
    elCol: {
      type: Number,
      default: () => 8,
    },
    width: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      checkArray:[],
      showDialog: false
    }
  },
  watch: {
    list(val) {
      this.checkArray = val.map(p=>p.prop)
      this.init()
    },
  },
  mounted() {
    this.checkArray = this.list.map(p=>p.prop)
    this.init()
  },
  methods: {
    init() {
      const localCheckArray = localStorage.getItem(this.name)
      // 如果本地缓存有，那么就存储起来，显示全部
      if(localCheckArray) {
        this.checkArray = localCheckArray.split(',')
        this.$emit("myInput", this.checkArray);
      } else {
        // 如果本地存储没有，且设置的默认展示字段数量大于0，那么就展示传入的主要字段
        if(this.defaultCheckList.length > 0) {
          this.checkArray = this.defaultCheckList
          this.$emit("myInput", this.checkArray);
        }
      }
    },
    // 提交更改的时候，刷新主表格的key值
    submits() {
      const checkArray = this.checkArray.join(',') || '';
      localStorage.setItem(this.name, checkArray)
      this.$emit("myInput", checkArray)
      this.$emit('change', Math.random())
      this.cancel()
    },
    cancel() {
      this.showDialog = false
    }
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  padding: 10px 0;
}
/* 设置显示隐藏 */
.field-setting {
  float: right;
  cursor: pointer;
}

</style>