el-checkbox中设置不可编辑

做项目遇到el-checkbox需要不可编辑，必须固定选择的需求，首先想到的肯定是disabled，但是disabled的样式不很好看，你接下来可能还会想到

readonly，然后你就会发现checkbox上面没有readonly这个属性。那我们怎么办呢！

 

下面是我的两个方法：

 

1，既然disabled不好看，那当然我们可以通过deep来修改disabled的样式

 

2，我们可以使用el-checkbox上面的带的change方法来实现

 

<el-checkbox-group v-model="colInfoEnable" @change="changeColInfo">
    <el-checkbox @change="readonly('account')" label="account">用户ID</el-checkbox>
    <el-checkbox @change="readonly('password')" label="password">密码</el-checkbox>
    <el-checkbox @change="readonly('fullName')" label="fullName">姓名</el-checkbox>
    <el-checkbox label="idNumber">学号/工号</el-checkbox>
    <el-checkbox label="idCard">身份证</el-checkbox>
    <el-checkbox label="mail">电子邮箱</el-checkbox>
    <el-checkbox label="phone">手机号码</el-checkbox>
    <el-checkbox label="sex">性别</el-checkbox>
    <el-checkbox label="xx">院校名称</el-checkbox>
    <el-checkbox label="xy">所在学院</el-checkbox>
    <el-checkbox label="zy">专业</el-checkbox>
    <el-checkbox label="grade">届别/年级</el-checkbox>
    <el-checkbox label="stubg">学历</el-checkbox>
</el-checkbox-group>

 

readonly(type) {
    this.colInfoEnable.push(type)
}

 

道理很简单，在值被置空后，我们再给它赋上，视觉上就感觉checkbox点击没有变化啦。