一、前言
众所周知，iview中有一个表格组件Table，用于展示多条结构类似的数据。之前遇到过一个需求，要手动控制table的表头显示。就是假如table表格一共有10列数据，可以通过设置勾选，决定显示多少列
二、代码
为了代码的复用性，将配置页面单独抽成了组件，所以代码中会有组件之间传值
父组件（表格页面）
<template>
<div>
<!-- 渲染table表格 -->
<TableComponent :allColList='allColList' :tableData='tableData' :defaultCheckList='defaultCheckList' @confirm="handleConfirm"></TableComponent>
</div>
</template>
<script>
import TableComponent from '@/components/TableComponent.vue'
export default {
name:'tableShow',
components:{
TableComponent
},
data(){
return {
// 所有表格列
allColList: [
{
type: "selection",
key: "selection",
width: 60,
align: "center",
},
{
title: "入口ID",
key: "enterId",
minWidth: 120,
align: "center",
tooptip: true,
},
{
title: "渠道",
key: "channel",
minWidth: 120,
align: "center",
},
{
title: "品牌",
key: "brand",
minWidth: 120,
align: "center",
},
{
title: "入口名",
key: "enterName",
minWidth: 120,
align: "center",
tooptip: true,
},
{
title: "状态",
key: "status",
minWidth: 120,
align: "center",
},
{
title: "更新人",
key: "updatedBy",
minWidth: 120,
align: "center",
},
],
//默认列
defaultCheckList:["enterId","channel","enterName"],
tableData: [
{
enterId: "1234wert",
channel: "手机",
brand: "小米",
enterName: "个性化视频专辑",
status: "上线",
updatedBy: "admin",
},
],
}
},
methods:{
// 提交确定事件 实际工作中会调接口
handleConfirm(val) {
this.defaultCheckList = val;
},
}
}
</script>
子组件（配置页面）
<template>
<div>
<div class="dropdown">
<Dropdown trigger="custom" placement="bottom-end" :visible="visible">
<a href="javascript:void(0)" @click="handleOpen">
自定义Table列
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list" style="width: 240px">
<div style="padding: 10px 15px;">
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
<Checkbox
:indeterminate="indeterminate"
:value="checkAll"
@click.prevent.native="handleCheckAll"
>全选</Checkbox>
</div>
<CheckboxGroup
v-model="checkAllGroup"
@on-change="checkAllGroupChange"
>
<Checkbox v-for="item in allCheckList" :key='item.key' :label="item.key">{{item.title}}</Checkbox>
</CheckboxGroup>
</div>
<div class="btnGroup">
<Button type="primary" @click="confirm" :disabled="checkAllGroup.length < 1">确认</Button>
<Button @click="handleClose">关闭</Button>
</div>
</DropdownMenu>
</Dropdown>
</div>
<Table ref="table" border :columns="showColList" :data="tableData"> </Table>
</div>
</template>
<script>
export default {
name: "tableComponent",
data() {
return {
//实际显示的表格列
showColList: [],
//是否显示配置弹出窗
visible: false,
indeterminate: true,
checkAll: false,
// 选中表格列
checkAllGroup: [],
//所有供选择的项
allCheckList:[],
// 默认显示的列
defaultColCheckList: [],
};
},
props:{
//所有table列
allColList:{
type:Array,
require:true
},
//table数据
tableData:{
type:Array,
default:() => []
},
//默认被选择的项
defaultCheckList:{
type:Array,
default:() => []
}
},
computed: {},
created(){
console.log('我是生命钩子函数created');
this.init();
},
watch:{
defaultCheckList(newValue, oldValue){
console.log('我是监听器函数checkList');
console.log(newValue)
console.log(oldValue)
this.init();
}
},
methods: {
init(){
console.log('我是初始化方法init');
this.allCheckList = this.allColList.filter(item => {
if(!item.type){
return item
}
})
if(this.defaultCheckList.length > 0){
this.defaultColCheckList = this.defaultCheckList;
}else{
this.defaultColCheckList = this.allCheckList.map(item => {
return item.key
})
}
this.dealTableColumn(this.defaultColCheckList);
},
/**
* 重新渲染table表格
*/
dealTableColumn(arr) {
this.showColList = [];
this.allColList.forEach((item) => {
if (arr.indexOf(item.key) > -1) {
this.showColList.push(item);
}
});
},
/**
* 显示配置弹窗
*/
handleOpen() {
this.visible = true;
this.checkAllGroup = this.defaultColCheckList;
if(this.checkAllGroup.length == this.allCheckList.length){
this.indeterminate = false;
this.checkAll = true;
}
},
/**
* 隐藏配置弹窗
*/
handleClose() {
this.visible = false;
this.checkAllGroup = [];
},
/**
* 全选时处理逻辑
*/
handleCheckAll() {
if (this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if (this.checkAll) {
this.checkAllGroup = this.allColList.map(item => {
return item.key
})
} else {
this.checkAllGroup = [];
}
},
/**
* 选项发生变化时处理逻辑
*/
checkAllGroupChange(data) {
if (data.length === this.allCheckList.length) {
this.indeterminate = false;
this.checkAll = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
},
/**
* 确认提交配置项
*/
confirm(){
// this.dealTableColumn(this.checkAllGroup);
// this.defaultColCheckList = this.checkAllGroup;
this.$emit('confirm', this.checkAllGroup)
this.visible = false;
}
},
};
</script>
<style scoped>
.dropdown {
display: flex;
justify-content: right;
margin:20px;
}
.ivu-checkbox-group-item{
display: block;
margin-top: 8px;
}
.btnGroup{
text-align: right;
margin-bottom: 10px;
}
.btnGroup button{
margin-right: 10px;
}
</style>
三、效果如下
