element UI checkbox,通过后台传来的数据默认选中

今天写项目时碰到的一个问题,因为后台传来的是字符串,如果使用 checked 属性所需要的值为布尔值,应该也有办法解决,但我没找到,后面通过 v-model绑定后台拿到的数据,来完成的这一点小功能

第一步:<el-checkbox-group>标签上v-model="role.permission"。这里role.permission 为后台拿到的数据,如图:

        <el-checkbox-group
          v-model="role.permission"
          @change="permissionchange($event)"
        >
          <el-checkbox label="read">读</el-checkbox>
          <el-checkbox label="write">写</el-checkbox>
          <el-checkbox label="delete">删</el-checkbox>
        </el-checkbox-group>

这里注意,el-checkbox 里的 label 值要和拿到的数据名称对应

第二步: 把后台拿到的字符串转为数组

 role: {
        roleName: '',
        reMark: '',
        menuIds: '',
        permission: [],
      },
this.role.permission = res.data.role.permission.split(',')

这时候就是,role.permission 里有什么值,上面和 label 的 el-checkbox 就会被默认选中

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Element 中,可以使用 `v-model` 指令将 Checkbox 组件绑定到一个变量或数组上,来控制 Checkbox勾选状态。因此,要判断当前 Checkbox 是否被选中,只需要判断该变量或数组中是否包含当前 Checkbox 的 value 值即可。 如果绑定的是一个变量,可以直接判断该变量是否为 true 或 false。如果绑定的是一个数组,可以使用 `Array.includes` 方法来判断数组中是否包含当前 Checkbox 的 value 值。以下是一个示例: ``` <template> <div> <el-checkbox v-model="checked">Checkbox</el-checkbox> <p>当前状态:{{ checked ? '已选中' : '未选中' }}</p> </div> </template> <script> export default { data() { return { checked: false }; } }; </script> ``` 在上述示例中,使用 `v-model` 将 Checkbox 绑定到一个 Boolean 类型的变量 `checked` 上。可以在模板中根据 `checked` 变量的值来判断当前 Checkbox 是否被选中。 如果绑定的是一个数组,可以在模板中使用 `Array.includes` 方法来判断数组中是否包含当前 Checkbox 的 value 值。例如: ``` <template> <div> <el-checkbox-group v-model="checkedList"> <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox> </el-checkbox-group> <p>选中的选项:{{ checkedList }}</p> <p>选项 1 是否被选中:{{ checkedList.includes(1) ? '已选中' : '未选中' }}</p> </div> </template> <script> export default { data() { return { checkedList: [], options: [ { label: '选项 1', value: 1 }, { label: '选项 2', value: 2 }, { label: '选项 3', value: 3 } ] }; } }; </script> ``` 在上述示例中,使用 `v-model` 将 Checkbox 绑定到一个数组 `checkedList` 上。在模板中可以使用 `Array.includes` 方法来判断数组中是否包含当前 Checkbox 的 value 值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值