直接使用Element 复选框,效果如下:
最终需要修改成的效果如下:
注意,选中状态、非选中状态时调整了背景色、边框色、可勾选小方框的颜色
复选框HTML代码:
<div class="body-content-checkbox-wrapper">
<el-checkbox-group v-model="formData.settlementSubType">
<!-- 第一个元素的disabled属性设置为了true -->
<el-checkbox label="01" disabled>采购订单</el-checkbox>
<el-checkbox label="02">反算单</el-checkbox>
<el-checkbox label="03">管输单</el-checkbox>
<el-checkbox label="04">其他费用单</el-checkbox>
<el-checkbox label="05">偏差结算单</el-checkbox>
</el-checkbox-group>
</div>