front/front-vue/src/components/Table/columnSetting.vue

<template>
    <el-tooltip class="item" effect="dark" content="表头设置" placement="top">
        <el-popover
        placement="right"
        title="表头设置"
        trigger="click"
        v-model="visible"    
        @show="show">
         <!-- v-model="visible"    点击关闭 -->
        <el-container style="height: 250px">
          <el-main style="height: 200px;margin-top:15px">
            <el-checkbox-group v-model="checkListTemp" @change="filter">
                <el-row  v-for="(item,index) in  tableListTemp" :key="index" >
                    <el-checkbox :label="item.label">{{item.value}}</el-checkbox>
                </el-row>
            </el-checkbox-group> 
          </el-main>
        </el-container>
            <!-- el-icon-arrow-down el-icon-menu -->
            <img slot="reference" class="zap-icon-setting" src="../../assets/images/components/icon_setting.png" alt="">
            <div  class="dialog-footer">
                <el-button size="small" type="success" @click="saveSet" >保存设置</el-button>
            </div>
        </el-popover> 
    </el-tooltip>
</template>
<script>
import { columnSetting } from "@/api/common/columnSetting";
export default {
  /* 名称 */
  name: "columnSetting",
  /*需要引用的页面传过来的参数 */
  props: ["checkList", "tableList", "selfDom", "tableId"],
  data() {
    return {
      checkListTemp: [],
      tableListTemp: [],
      visible:false   //点击关闭
    };
  },
  mounted() {},

  methods: {
    filter() {
      this.selfDom.filter(this.checkListTemp);
    },
    saveSet() {
      //获取文件路径
      var psfPagePath = window.location.pathname; //用请求后台的url作为唯一标识
      var psfTableName = this.tableId;
      var settingForm = {};
      settingForm.psfPagePath = psfPagePath;
      settingForm.psfTableName = psfTableName;
      settingForm.psfShowData = this.checkListTemp;
      columnSetting(settingForm)
        .then(response => {
          this.msgSuccess("设置成功");
          this.selfDom.columnQuery();
          this.visible = false     //点击关闭
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "设置失败"
          });
        });
    },
    show() {
      //因为子元素不能修改父元素的值，复制之后再修改
      this.checkListTemp = eval("(" + JSON.stringify(this.checkList) + ")");
      this.tableListTemp = eval("(" + JSON.stringify(this.tableList) + ")");
    }
  }
};
</script>
<style lang="scss">
.zap-icon-setting{
  width: 21px;
  height: 20px;
  line-height: 32px;
  vertical-align: middle;
}
</style>