小小布鲁伊 2021-01-10 22:52 采纳率: 100%
浏览 1976
已结题

elementui<el-tabs>多个tab无法正确获取动态数据

<div class="add-form">
                <el-dialog title="编辑角色" :visible.sync="dialogFormVisible4Edit">
                    <template>
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="角色名称">
                                                <el-input v-model="formData.name"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="关键字">
                                                <el-input v-model="formData.keyWord" type="textarea"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="说明">
                                                <el-input v-model="formData.description" type="textarea"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="权限信息" name="second">
                                <div class="checkScrol">
                                    <table class="datatable">
                                        <thead>
                                        <tr>
                                            <th>选择</th>
                                            <th>权限名</th>
                                            <th>关键字</th>
                                            <th>说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="c in permissionData">
                                            <td>
                                                <input :id="c.id" v-model="permissions" type="checkbox" :value="c.id">
                                            </td>
                                            <td><label :for="c.id">{{c.name}}</label></td>
                                            <td><label :for="c.id">{{c.keyWord}}</label></td>
                                            <td><label :for="c.id">{{c.description}}</label></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane  label="菜单信息" name="third">
                                <div class="checkScrol">
                                    <table class="datatable">
                                        <thead>
                                        <tr>
                                            <th>选择</th>
                                            <th>菜单名</th>
                                            <th>跳转页面</th>
                                            <th>path</th>
                                            <th>同级菜单中的优先级</th>
                                            <th>父级菜单</th>
                                            <th>菜单等级</th>
                                            <th>说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="c in menuDate">
                                            <td>
                                                <input :id="c.id" v-model="menus" type="checkbox" :value="c.id">
                                            </td>
                                            <td><label :for="c.id">{{c.name}}</label></td>
                                            <td><label :for="c.id">{{c.linkUrl}}</label></td>
                                            <td><label :for="c.id">{{c.path}}</label></td>
                                            <td><label :for="c.id">{{c.priority}}</label></td>
                                            <td><label :for="c.id">{{c.parentMenuId}}</label></td>
                                            <td><label :for="c.id">{{c.level}}</label></td>
                                            <td><label :for="c.id">{{c.description}}</label></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

请求

let vue = new Vue({
        el: '#app',
        data: {
            activeName: 'first',//添加/编辑窗口Tab标签名称
            dataList: [],//列表数据
            formData: {},//表单数据
            permissionData: [],//新增和编辑表单中对应的权限信息列表数据
            menuDate: [],//新增和编辑表单中对应的菜单信息列表数据
            permissions: [],//新增和编辑表单中权限对应的复选框,基于双向绑定可以进行回显和数据提交
            menus: [],//新增和编辑表单中菜单对应的复选框,基于双向绑定可以进行回显和数据提交
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            dialogFormVisible4Edit: false//控制编辑窗口显示/隐藏
        },
        created() {
            this.findPage();
        },
        methods: {
            // 弹出编辑窗口
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                this.activeName = "first";
                let id = row.id;
                //获取权限页面的权限列表
                axios.get(`/permission/findAllList.do`).then(response => {
                    if (response.data.flag) {//查询成功
                        this.permissionData = response.data.data;
                        //获取角色中包含的权限的列表,用于页面复选框回显List<int>
                        axios.get(`/roles/findPermissionCheckedList.do?id=${row.id}`).then((response) => {//获取角色中已选择的权限的列表
                            this.permissions = response.data;
                        });
                        console.log(response)
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
                //获取菜单页面的菜单列表
                axios.get(`/menu/findAllList.do`).then(response => {
                    if (response.data.flag) {//查询成功
                        this.menuDate = response.data.data;
                        //获取角色中包含的权限的列表,用于页面复选框回显List<int>
                        axios.get(`/roles/findMenuCheckedList.do?id=${row.id}`).then((response) => {//获取角色中已选择的权限的列表
                            this.permissions = response.data;//上表面的方法也可以啊????????????????
                        });

                    } else {
                        this.$message.error(response.data.message);
                    }
                });

                //获取角色信息,页面回显旧数据
                axios.get(`/roles/findRoleById.do?id=${id}`).then(response => {
                    if (response.data.flag) {//查询成功
                        this.formData = response.data.data;
                    } else {
                        this.$message.error(response.data.message)
                    }
                })

            }
        }
    })

结果

权限信息中三个选中信息时菜单信息的结果,没办法正常显示

  • 写回答

7条回答 默认 最新

  • zhshchilss 2021-01-11 09:31
    关注

    权限信息中三个选中信息时菜单信息的结果,没办法正常显示

    这句话都不明白什么意思。

    角色的权限信息和菜单信息什么关系,交互逻辑是什么?
    你选中中间的,期望出现什么,没有出现什么?

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因