Element复选框只要框不要字

最新推荐文章于 2025-08-28 16:33:29 发布

原创最新推荐文章于 2025-08-28 16:33:29 发布 · 968 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #elementui

element-ui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用ElementUI的el-checkbox组件创建一个多选框列表，同时通过CSS样式隐藏不必要的文字，实现只显示勾选框的效果。

场景

复选框分别放在多个选项后，只需要勾选框，不要展现的文字。
在这里插入图片描述

实现

<el-checkbox-group v-model="checkList">
	<el-checkbox label="使用核武器"></el-checkbox>
</el-checkbox-group>
...
data() {
  return {
	checkList: ['使用核武器','自动规避'],
  };
},
...
::v-deep .el-checkbox__label{
	padding: 0;
	width: 0;
	font-size: 0;
}