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

猜你喜欢

转载自blog.csdn.net/lolhuxiaotian/article/details/123656267