要素のUIチェックボックス。バックグラウンドから送信されたデータからデフォルトで選択されます

今日プロジェクトを作成するときに発生した問題。背景は文字列であるため、checked属性に必要な値がブール値の場合、それを解決する方法があるはずですが、見つかりませんでした。次に、 vモデルによる背景データに対して、この小さな機能を完了するために

ステップ1：<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-チェックボックスのラベル値は、取得したデータの名前に対応している必要があることに注意してください

ステップ2：バックグラウンドで取得した文字列を配列に変換します

 role: {
        roleName: '',
        reMark: '',
        menuIds: '',
        permission: [],
      },

this.role.permission = res.data.role.permission.split(',')

このとき、role.permission、上のel-チェックボックス、およびラベルの値はデフォルトで選択されます。