需求:只要隐藏了字段按钮就变为选中状态
思路:通过子组件传递隐藏列表的长度给父组件,来配置按钮
步骤:
- 子组件通过$emit('hiddenColumn',this.items1.length)
- 父组件在子组件标签内部接受子组件传递来的事件
- 再methods中写事件通过参数来接收items.length,使用变量来接收,只要该变量长度不为0,就表示隐藏字段
子组件:
this.$emit('hiddenColumn',this.items1.length); this.columns = myColumns;
父组件:
<template>
<el-button v-if="hiddenColumnNum == 0 " class="screen-button-system-default hover-screen-button-system" type="primary" plain size="mini" @click="moreConfig"> <svg-icon class-name="upload-file-config" icon-class="config" style="margin-right: 4px;" /> 配置显示字段 </el-button>
<el-button v-else class="screen-button-system-default1 hover-screen-button-system" type="primary" plain size="mini" @click="moreConfig"> <svg-icon class-name="upload-file-config" icon-class="config" style="margin-right: 4px;" /> 配置显示字段 </el-button>
<more-config ref="childRef" v-if="moreConfigView" @hiddenColumn="hiddenColumnEvent" :cacheKey="cacheKey" :defaultColumns="defaultColumns" @close-moreConfig="closeMoreConfig"></more-config>
</template>
<script>
data(){
return{
hiddenColumnNum:0,
}
},
methods: { hiddenColumnEvent(num){ this.hiddenColumnNum = num; console.log(num,this.hiddenColumnNum,9999,'数量');
},
</script>