前端数组赋值问题

在做用户分配角色时碰到一个挺坑的问题。

使用的vue+elementui框架开发;

页面代码如下：

<template>
  <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value"
      filterable
      :left-default-checked=leftchecked
      :right-default-checked=rightchecked
      @right-check-change='change'
      :render-content="renderFunc"
      :titles="['未分配角色', '已分配角色']"
      :button-texts="['到左边', '到右边']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
    </el-transfer>
    <div slot="footer" style="margin-left: 70%;padding-top: 20px; ">
      <el-button :size="size" @click="childDialog(false)" >{{$t('action.cancel')}}</el-button>
      <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">
        {{$t('action.submit')}}
      </el-button>
    </div>
  </div>
</template>

<style>

</style>
<script>
    import config from "../../../http/config";

    export default {
        name: "AssignedRole",
        props:{
            selectId:{
                type:String,
                default:0
            }
        },
        data() {
            const generateData = _ => {
                const data = [];
                var params = new URLSearchParams();
                params.append('userId', this.selectId);
                this.$api.role.listUserRoles(params).then((res) => {
                    this.editLoading = false;
                    if (res.code == "0000") {
                       // this.data = res.data;
                            //默认选中的树的数据
                        let that = this
                            res.data.forEach(value => {
                                that.data.push({
                                    key: value.roleId,
                                    label:value.roleName,
                                })
                            })
                    } else {
                        this.$message({message: '操作失败, ' + res.msg, type: 'error'})
                    }
                })
                return data;
            };
            const generateValue = _ => {
                const value = [];
                var params = new URLSearchParams();
                params.append('userId', this.selectId);
                this.$api.role.listUserRolesBat(params).then((res) => {
                    this.editLoading = false;
                    if (res.code == "0000") {
                        let that = this
                        res.data.forEach(value1 => {
                            let roleId = value1.roleId;
                            that.value.push(roleId)
                        })
                    } else {
                        this.$message({message: '操作失败, ' + res.msg, type: 'error'})
                    }
                })
                return value;
            };
            return {
                size: 'small',
                data: generateData(),
                value: generateValue(),
                renderFunc(h, option) {
                    return <span>{ option.label }</span>;
                },
                editLoading: false,
                leftchecked:[],
                rightchecked:[],
                heckedkeys:[],
            };
        },

        methods: {
            //获取到选中的值传到调用出
            childDialog:function (val) {
                this.$emit('fatherMethod');
            },
            handleChange(value, direction, movedKeys) {
                //console.log(value, direction, movedKeys);
            },
            //获取到选中的值传到调用出
            childDialog:function (val) {
                this.$emit('fatherMethod');
            },

            //获取选中的部门名称
            changeLocationValue: function (val) {
                var name = '';
                var list = this.orglist;

                for (var i = 0; i < list.length; i++) {
                    if (list[i].sysCode == val) {
                        name = list[i].sysName;
                    }
                }

                this.dataForm.sysName = name;

            },
            change(){
                this.value
            },

            submitForm: function () {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true
                            var params = new URLSearchParams();
                            params.append('selectUserId', this.selectId);
                            params.append('roleIds',  this.value);
                            this.$api.user.saveUserRole(params).then((res) => {
                                this.editLoading = false
                                if (res.code == '0000') {
                                    this.$message({message: '分配成功', type: 'success'})
                                    this.dialogVisible = false
                                } else {
                                    this.$message({message: '操作失败, ' + res.msg, type: 'error'})
                                }
                                this.childDialog();
                                this.$emit('fatherMethod');
                            })

                        }).catch(() => {
                        })

            }

        },

        mounted() {
        }
    };
</script>

 

push的时候我一直使用的是push({"值"})；这样是有key的，而element的穿梭框默认在右侧的应该判断value的值不能带key。

所以应该使用push();  这种方式去赋值。