checkbox复选框组的使用

checkbox复选框组的使用

最近做的一个项目使用checkvox复选框组，用后台返回来的数据进行复选框的选中与否，并将修改的状态发给后端。
后台给的数据是数组里面包含对象的形式，[name: “”, status: false], 但是element-ui复选框组里面选中的值存到数组里面是一堆标签名字的字符串，而且我的展现是在一个子组件的一个弹框，我把选中的数组包含字符串的数据格式发给后端，后端又返回给我数据只是把status的状态变成true，所以我前端需要将获取的数据处理再发送给子组件，我是这样处理的。

弹框组件

弹框子组件代码

<template>
  <div class="staff">
    <el-dialog v-model="rolesDialogVisible" width="50%" center title="设置权限" @close="handleClose">
      <el-divider content-position="center">员工信息字段授权</el-divider>
      <el-checkbox-group v-model="hrFields">
        <el-row :gutter="18">
          <el-col :span="6" v-for="field in fields" :key="field.name">
            <el-checkbox :label="field.name"></el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="handleSavePerm" type="primary">确定</el-button>
          <el-button size="small" @click.stop="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RolesManageChild',
  props: {
    rolesManageDialogVisible: {
      type: Boolean,
      default: false
    },
    fields: {
      type: Array,
      default: () => ([]),
      required: true
    },
    fieldsHr: {
      type: Array,
      default: () => ([])
    }
  },
  watch: {
    fieldsHr: {
      handler (val) {
        if (Array.isArray(val) && val.length > 0) {
          this.hrFields = val;
        }
      },
      deep: true,
    }
  },
  data () {
    return {
      currentRole: {
        name: '',
        description: ''
      },
      hrFields: [],
    }
  },
  computed: {
    rolesDialogVisible: {
      get () {
        return this.rolesManageDialogVisible;
      },
      set (val) {
        this.$emit('update:rolesManageDialogVisible', val);
      },
    },
  },
  methods: {
    handleSavePerm () {
      // const list = this.fields;
      // list.forEach(item1 => {
      //   this.hrFields.forEach(item2 => {
      //     if (item1.name === item2) {
      //       item1.status = true;
      //     }
      //   })
      // })
      if (this.hrFields.length > 0) {
        this.$emit('putFields', this.hrFields);
      }
    },
    handleClose () {
      this.$emit('roleDialogClose');
    }
  }
}

父组件的代码

<!--  设置权限-->
  <roles-manage-child
    v-if="rolesManageDialogVisible"
    :roles-manage-dialog-visible="rolesManageDialogVisible"
    :fields="fields"
    @roleDialogClose="roleDialogClose"
    @putFields="putFields"
    :fields-hr="hrFields"
    ref="roleManageRef"
  />

methods: {
	 // 设置权限
    assignManagement (row) {
      this.roleId = row.roleId;
      getHrPermissions(row.roleId).then(res => {
        if (res) {
          this.fields = res;
          this.hrFields = [];
          if (Array.isArray(res)) {
            res.forEach(item => {
              if (item.status === true) {
                this.hrFields.push(item.name);
              }
            })
          }
        }
      }, (err) => {
        console.error(err);
        this.$message({
          type: 'error',
          message: err.errmsg,
        });
      })
      this.rolesManageDialogVisible = true;
    },
    putFields (val) {
      const obj = {
        roleId: this.roleId,
        fields: val
      }
      putHrFields(obj).then(res => {
        if (res) {
          this.$message.success('设置权限成功!');
          this.rolesManageDialogVisible = false;
        }
      }, (err) => {
        console.error(err);
        this.$message({
          type: 'error',
          message: err.errmsg,
        });
      })
}