element UI checkbox, selected by default through the data sent from the background

A problem encountered when writing a project today, because the background is a string, if the value required by the checked attribute is a boolean value, there should be a way to solve it, but I didn't find it, and then bind the background through v-model. To the data, to complete this little function

Step 1: v-model="role.permission" on the <el-checkbox-group> tag. Here role.permission is the data obtained in the background, as shown in the figure:

        <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>

Note here that the label value in the el-checkbox should correspond to the name of the data obtained

Step 2: Convert the string obtained in the background into an array

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

At this time, what is the value in role.permission, the el-checkbox above and the label will be selected by default

Guess you like

Origin blog.csdn.net/lolhuxiaotian/article/details/123656267
Recommended