vue2 自定义 el-radio-button 的样式, 并设置默认值
效果
HTML
<el-radio-group v-model="form.radio"> <el-radio-button label="0">指定</el-radio-button> <el-radio-button label="1">认领</el-radio-button> <el-radio-button label="2">自荐</el-radio-button> </el-radio-group>
CSS 修改样式
::v-deep .el-radio-button__inner { width: 100px; height: 36px; border: 0 !important; font-size: 14px; font-weight: 400; color: #696969; line-height: 14px; outline: none; box-shadow: none; } // 修改激活后的样式 ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner { background: #f2f2f2; border: 0 !important; color: #696969; line-height: 14px; outline: none; box-shadow: none; }
设置默认值
data () { return { taskForm: { taskTypeRadio: 0 }, } }