ElementUI Checkbox 多选框超过xx条显示更多

た入场券 2023-01-18 12:20 150阅读 0赞

![在这里插入图片描述][20210506110629844.png]  
点击 更多  
![在这里插入图片描述][20210506110644475.png]

<template>
    	<el-row class="font-2">
    		<el-col :span="4">数据来源</el-col>
    			<el-col :span="20">
    				<el-checkbox-group v-model="dataSourceChecked">
    					<el-checkbox v-show="dataSourceMore" v-if="index < 4" v-for="(item,index) in dataSource" :label="item.code" :key="item.code + '1'">{ { item.remark}}
    					</el-checkbox>
    					<el-checkbox v-show="!dataSourceMore" v-for="item in dataSource" :label="item.code" :key="item.code">{ { item.remark}}
    					</el-checkbox>
    					<div class="divmore" v-if="dataSource.length > 4">
    					  <div class="moreText point-click" v-show="dataSourceMore" @click="dataSourceMoreShow">更多>></div>
    					  
    					</div>
    				</el-checkbox-group>
    			</el-col>
    		</el-col>
    	</el-row>
    </template>
    <script>
    	import { selectByTypeWeb} from '@/api/home/assetCatalogue'
    	export default { 
    		data() { 
    			return { 
    				dataSource:[],//数据来源
    				dataSourceChecked: [],
    				dataSourceMore:false,
    				dataObject:[],//数据对象
    				dataObjectChecked: [],
    				dataObjectMore:false,
    				dataLifeCycle:[],//生命周期
    				dataLifeCycleChecked: [],
    				dataLifeCycleMore:false,
    			}
    		},
    		created() { 
    			this.getDict()
    		},
    		methods: { 
    			getDict() { 
    				selectByTypeWeb('DATA_SOURCE').then(response => { 
    					this.dataSource = response.data.data
    					if(this.dataSource.length > 4) { 
    						this.dataSourceMore = true
    					}
    				})
    				selectByTypeWeb('DATA_OBJECT').then(response => { 
    					this.dataObject = response.data.data
    					if(this.dataObject.length > 4) { 
    						this.dataObjectMore = true
    					}
    				})
    				selectByTypeWeb('DATA_LIFECYCLE').then(response => { 
    					this.dataLifeCycle = response.data.data
    					if(this.dataLifeCycle.length > 4) { 
    						this.dataLifeCycleMore = true
    					}
    				})
    			},
    			dataSourceMoreShow() { 
    				this.dataSourceMore = !this.dataSourceMore
    			},
    			dataObjectMoreShow() { 
    				this.dataObjectMore = !this.dataObjectMore
    			},
    			dataLifeCycleMoreShow() { 
    				this.dataLifeCycleMore = !this.dataLifeCycleMore
    			}
    		},
    	}
    </script>

[20210506110629844.png]: /images/20221021/7496c0be6cd944f0b1c9b9cf8f3c7bd3.png
[20210506110644475.png]: /images/20221021/0e2f2d9bd64947ddb3317134544a1245.png