element table 自定义列
作者：互联网
个人思路保存…
<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