Element實現checkbox多選

如何實現如圖所示功能

• 頁面代碼

<el-form-item label="角色" size="mini" prop="roleIdList">
  <el-checkbox-group v-model="dataForm.roleIdList">
    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

• roleList 是 select 查出來的

this.$http({
  url: this.$http.adornUrl('/sys/role/select'),
  method: 'get',
  params: this.$http.adornParams()
}).then(({data}) => {
  this.roleList = data && data.code === 0 ? data.list : []
})

• roleIdList 數據庫 直接返回的數據
  

一共有這些變量

dataForm.roleIdList 提交給后台的選中的
roleList 角色列表

https://www.freesion.com/article/7862774047/