elementtable⾃定义列
个⼈思路保存…
<template>
<el-dialog v-if="dialogVisible" 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 >
<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 ></div>
<el-checkbox-group v-model="checks[index]" @change="value => handleCheckedCitiesChange(value, index)">
<el-row :gutter="20">
<el-col :span="7" v-for="(item2, j) ls":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) {
lumnDisplay[num].cols.indexOf(label) !== -1
}
}
// 写在组件创建的声明周期, 从浏览器缓存获取存储的显⽰列
// 获取账户⾃定义列缓存
let colPlan = JSON.Item('accountPlan'))
if (colPlan) {
}
// script标签内const声明
// 可控制列
const columnData = [
{
name: '基础信息',
clos: ['应⽤名称']
}
]
]
// 默认展⽰列
const defaultColimn = [
{
name: '基础信息',
clos: ['应⽤名称']
}
]
// data() 数据
// ⾃定义列
columns: columnData, // 可控制列
dfColumns: defaultColimn, // 默认展⽰列    columnDisplay: defaultColimn, // 展⽰
// ⽗组件页⾯展⽰函数
columnFn (res) {
//  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.$lumnFn(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;
}
}
// 列表盒⼦
element表格横向滚动条
.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。