标签：false checkedArr 自定义 cols element length table checks name

个人思路保存…

<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>

标签：false,checkedArr,自定义,cols,element,length,table,checks,name
来源： https://blog.csdn.net/weixin_45945615/article/details/111523565

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。