欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端数组赋值问题

程序员文章站 2024-03-24 09:12:22
...

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

使用的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();  这种方式去赋值。

相关标签: element