个人思路保存…

<template>
  <el-dialog v-if="dialogVisible" style="min-height: 800px" title="自定义列" :visible.sync="dialogVisible" min-width="400px" width="40%"
    :before-close="handleClose">
    <div class="col-flex">
      <div class="col-nav">
        <a :class="isActive === index? 'active' : ''" :href="`#${item.name}`" @click="colorClick(index)" v-for="(item, index) in checkedArr"
          :key="index">{{ item.name }}</a>
      </div>
      <div class="col-main">
        <el-scrollbar style="height: 300px;">
          <div :id="item.name" class="col-checkbox" v-for="(item, index) in checkedArr" :key="item.name">
            <el-checkbox :indeterminate="indeArr[index]" v-model="checkAll[index]" @change="val => handleCheckAllChange(val, index)">
              {{ item.name }}</el-checkbox>
            <div style="margin: 10px 0;"></div>
            <el-checkbox-group v-model="checks[index]" @change="value => handleCheckedCitiesChange(value, index)">
              <el-row :gutter="20">
                <el-col style="margin-top: 15px" :span="7" v-for="(item2, j) in item.cols" :key="j">
                  <el-checkbox :value="item2" :label="item2">{{ item2 }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
/**
 * element 自定义列控制弹框(兼容多table)
 * 外部表格以及方法:
 * <el-table ref="multipleTable" :data="tableData" border @header-dragend="headerDragFn">
      <el-table-column key="1" label="基础信息">
        <el-table-column key="2" prop="company_name" label="公司"></el-table-column>
        <el-table-column key="3" prop="app_name" label="应用名称" v-if="colIndexOf(0, '应用名称')"></el-table-column>
      </el-table-column>
 * </el-table>
 * colIndexOf : (参数1, 参数2)   --- 写在计算属性中
 * 参数1: 当前分组下标
 * 参数2: 当前行label
 * 
 * // 条件返回(用于判断自定义列是否显示) columnDisplay: 存储显示的值
    colIndexOf () {
      return function (num, label) {
        return this.columnDisplay[num].cols.indexOf(label) !== -1
      }
    }
    // 写在组件创建的声明周期, 从浏览器缓存获取存储的显示列
   // 获取账户自定义列缓存
    let colPlan = JSON.parse(localStorage.getItem('accountPlan'))
    if (colPlan) {
      this.columnDisplay = colPlan
    }

    // script标签内const声明
    // 可控制列
    const columnData = [
      {
        name: '基础信息',
        clos: ['应用名称']
      }
    ]
    // 默认展示列
    const defaultColimn = [
      {
        name: '基础信息',
        clos: ['应用名称']
      }
    ]
    // data() 数据
    // 自定义列
    columns: columnData, // 可控制列
    dfColumns: defaultColimn, // 默认展示列
    columnDisplay: defaultColimn, // 展示

    // 父组件页面展示函数
    columnFn (res) {
      this.columnDisplay = JSON.parse(res)
      // this.$nextTick(() => {
      //   this.$refs.multipleTable.doLayout()
      // })
    }

    // 打开自定义列弹框
    cusColumnClick () {
      this.$refs.cuColumn.dialogVisible = true
    }
 */
export default {
  name: 'customColumn',
  props: {
    // 父组件名称(浏览器存储)
    parName: {
      type: String,
      default: ''
    },
    // 可控制列
    checkedArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 默认展示列
    dfColumns: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    dialogVisible: function (newVal, oldVal) {
      if (newVal == true) this.VisibleFn()
    }
  },
  created () {
    if (this.dialogVisible) {
      this.VisibleFn()
    }
  },
  data () {
    return {
      dialogVisible: false,
      checkAll: [], // 全选
      checks: [], // 默认勾选的数组
      indeArr: [], // 全选数组
      isActive: 0 // 变色
    }
  },
  methods: {
    // 点击变色
    colorClick (i) {
      this.isActive = i
    },
    // 对传过来的数据进行处理, 更新checkAll的状态
    VisibleFn () {
      for (let i = 0; i < this.dfColumns.length; i++) {
        this.checks[i] = this.dfColumns[i].cols
        if (this.checks[i].length === this.checkedArr[i].cols.length) {
          this.indeArr[i] = false
          this.checkAll[i] = true
        } else {
          this.checkAll[i] = false
          this.indeArr[i] = false
        }
        if (this.checks[i].length !== 0 && this.checks[i].length < this.checkedArr[i].cols.length) {
          this.indeArr[i] = true
          this.checkAll[i] = false
        }
      }
      // debugger
    },
    // 关闭对话框
    handleClose () { this.dialogVisible = false },
    // 点击全选
    handleCheckAllChange (val, i) {
      this.checks[i] = val ? this.checkedArr[i].cols : []
      this.indeArr[i] = false
    },
    // 点击勾选/取消
    handleCheckedCitiesChange (val, i) {
      let checkedCount = val.length
      // 使用this.$set方法, 否则视图不更新
      this.$set(this.checkAll, i, checkedCount === this.checkedArr[i].cols.length)
      this.$set(this.indeArr, i, checkedCount > 0 && checkedCount < this.checkedArr[i].cols.length)
    },
    // 确定按钮
    submit () {
      // 分类处理存储格式, 方便父组件展示
      for (let i = 0; i < this.checkedArr.length; i++) {
        let cols = this.checks[i]
        this.checks[i] = {
          name: this.checkedArr[i].name,
          cols
        }
      }
      // 保存到浏览器
      localStorage.setItem(this.parName, JSON.stringify(this.checks))
      // 将更改后的数据传到父组件
      this.$parent.columnFn(JSON.stringify(this.checks))
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  min-width: 700px;
}

.col-flex {
  display: flex;
}

// 导航盒子
.col-nav {
  width: 140px;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-right: none;
  a {
    text-decoration: none;
    padding-left: 16px;
    line-height: 40px;
    color: #515a6e;
    cursor: pointer;
    display: block;
  }
  a:hover {
    color: #409eff;
  }
}

// 列表盒子
.col-main {
  padding-top: 10px;
  flex: 1;
  height: 290px;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  padding-left: 5px;
}
// 多选盒子
.col-checkbox {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #d8d8d8;
}
.col-checkbox:last-child {
  border: none;
}

// 隐藏 element 横向滚动条
/deep/.el-scrollbar__bar.is-horizontal {
  height: 0;
  width: 0;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}

// 点击变色
.active {
  color: #409eff !important;
}
</style>