<template>
|
<div style="text-align: right;">
|
<el-popover placement="bottom" title="列筛选" trigger="click" @hide="saveSelectedColumns">
|
<el-checkbox-group class="country-group" v-model="checkResult">
|
<div class="country-group-cloumn">
|
<el-checkbox class="country-group-item" v-for="item of colSelect" :label="item.prop" :key="item.prop">{{item.label}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
<el-button type="button" size="small" slot="reference"
|
><i class="el-icon-arrow-down el-icon-menu"></i
|
></el-button>
|
</el-popover>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'column-select',
|
props: ['showColList','pageCode'],//从父组件传过来的值
|
watch: {
|
checkResult(val) {
|
// console.log(val,'checkResult的 val')
|
let arr=[]
|
let arr1 = this.showColList.filter(i => !val.includes(i.prop)) // 未选中列
|
arr1.forEach((item,index)=>{
|
arr.push(item.prop)
|
})
|
this.notSelectedColumns=arr
|
this.showColList.filter(item => {
|
if (val.indexOf(item.prop) !== -1) {
|
item.isShow = true
|
} else {
|
item.isShow = false
|
}
|
})
|
}
|
},
|
data() {
|
return {
|
checkResult: [], //选中列集合 （含列表上未显示的）
|
notSelectedColumns:[] //未选中列集合
|
}
|
},
|
created() {
|
},
|
methods:{
|
async saveSelectedColumns(){
|
// alert(2345)
|
let param={
|
pageName:this.$route.path,
|
pageCode:this.pageCode,
|
columnList:this.notSelectedColumns,
|
isShow:0,
|
}
|
console.log(param,'param param')
|
let res = this.$http.post('/defaultShowConfig',param)
|
// if (res) {
|
// await this.$alert('保存成功',{type: 'success'})
|
// }
|
}
|
},
|
computed:{
|
colSelect(){
|
return this.showColList.filter(i =>i.solidShow == true)
|
},
|
},
|
mounted() {
|
setTimeout(() => {
|
|
this.showColList.forEach((item, index) => {
|
console.log(item.isShow,'item.isShow item.isShow')
|
if(item.isShow)
|
this.checkResult.push(item.prop)
|
})
|
}, 500)
|
}
|
}
|
</script>
|
|
<style>
|
.country-group {
|
display: flex;
|
justify-content: center;
|
}
|
|
.country-group-cloumn {
|
display: flex;
|
flex-direction: column;
|
margin: 0 20px;
|
}
|
|
.country-group-item {
|
margin: 4px 0;
|
}
|
|
|
</style>
|
