4.1学习笔记

4.1

1.渲染问题

直接使用

getRoleList()

进行渲染的话，会自动关闭展开栏，这样删除权限时不是很友好，为了避免这种情况，应使用如下写法：

const delConfirm=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err); 
            if(delConfirm=='cancel') {return this.$message.info('取消了删除')}
            const {data:res}=await 				    				this.$http.delete('roles/'+role.id+'/rights/'+rightId);
            if(res.meta.status!=200){return this.$message.error('删除失败')}
            this.$message.success('删除成功');
			//使用如下写法，直接将返回的数据赋值给role.children
            role.children=res.data;

2.注意v-for的位置

放在el-row上，就是给每一行添加；放在el-col上就是给每一列添加；放在el-tag上，就是给每一列添加。做之前要先想好需求

<el-row :class="['ibottom',i1==0?'itop':'','vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
                            <el-col :span="6" >
                                <el-tag closable @close="removeRightsById(scope.row,item1.id)">{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="18">
                                <el-row :class="[i2==0?'':'itop','vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id">
                                    <el-col :span="6" >
                                        <el-tag type="warning" closable @close="removeRightsById(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="12" >
                                        <el-tag v-for="item3 in item2.children" :key="item3.id" type="success" closable @close="removeRightsById(scope.row,item3.id)">{{item3.authName}}</el-tag>
                    
                                    </el-col>
                                </el-row>
                            </el-col>
 </el-row>