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 就会被默认选中

经验分享 程序员 微信小程序 职场和发展