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

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
    已采纳

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

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

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

    点赞 打赏 评论
  • 禅思院 2021-01-11 09:53

    没看明白  你可以说清楚一点

    点赞 打赏 评论
  • 小小布鲁伊 2021-01-12 09:10

    这个是什么网站,居然没办法回复评论

    点赞 打赏 评论
  • 小小布鲁伊 2021-01-12 09:23

    问题补充下:权限信息和菜单信息中是权限和菜单的列表,这两者没有关系,

    在“编辑角色”这个窗口权限信息和菜单信息栏分别显示的是所有的权限和菜单,被勾选的状态是从后台数据库拿的

    ,后台数据没有问题,就是显示的时候本来应该菜单信息的勾选状态显示在了权限信息上,菜单信息的勾选状态不显示

     

    点赞 打赏 评论
  • zhshchilss 2021-01-12 09:35

    //获取菜单页面的菜单列表

     

    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;//上表面的方法也可以啊????????????????

     

    });

    点赞 打赏 评论
  • zhshchilss 2021-01-12 09:36

    //看这里看这里看这里 注释的那一会,变量取错了

    点赞 打赏 评论
  • zhshchilss 2021-01-12 09:38

    menuDate这个应该menuData,名字调整一下

     

    点赞 打赏 评论

相关推荐 更多相似问题