【vue_2】创建一个弹出权限不足的提示框

定义了一个名为 getUserRole 的 JavaScript 函数，该函数接受一个参数 authorityId，根据这个参数的不同值返回相应的用户角色字符串。这段代码的目的是根据传入的 authorityId 值判断用户的角色，然后返回相应的角色名称。

• 如果 authorityId 的值等于 888，函数返回字符串 ‘超级管理员’。
• 如果 authorityId 的值等于2，函数返回字符串 ‘游客’。
• 如果 authorityId 的值等于 1000，函数返回字符串 ‘abc’。
• 如果 authorityId 的值等于 1200，函数返回字符串 ‘测试人员’。
• 如果 authorityId 的值等于 2000，函数返回字符串 ‘开发人员’。
• 如果 authorityId 的值等于 3001，函数返回字符串 ‘def’。
• 如果 authorityId 的值不属于上述任何一个特定的值，函数返回字符串 ‘其他角色’。

function getUserRole(authorityId) {
    if (authorityId === 888) {
        return '超级管理员';
    } else if (authorityId === 2) {
        return '游客';
    } else if (authorityId === 1000) {
        return 'abc';
    } else if (authorityId === 1200) {
        return '测试人员';
    } else if (authorityId === 2000) {
        return '开发人员';
    } else if (authorityId === 3001) {
        return 'def';
    } else {
        return '其他角色';
    }
}

定义了一个名为 authority_message 的 JavaScript 箭头函数。该函数使用 Element UI 框架中的 ElMessage 组件显示一个警告消息，提示用户当前用户的权限不够。

const authority_message = () => {
    ElMessage({
        type: 'warning',
        message: '当前用户的权限不够'
    });
};

上面这个 ElMessage是已经封装好的，是git-vue-admin框架自带的东西。

<div style="display: block;">
      <el-link v-if="![888,1000,1200,2000,3000,3001].includes(userStore.userInfo.authorityId)" class="link" type="primary" @click="authority_message">
        <h1>账号管理</h1>
    </el-link>
    <el-link v-else class="link" type="primary" @click="toTarget('person')">
      <h1>账号管理</h1></el-link>
</div>

上面这个userStore.userInfo.authorityId能够拿到对应当前权限人员的号码，如果是超级管理员，拿到的就是888。

console.log('111aqd',userStore.userInfo.authorityId);

可以通过上面这个看是否在控制台打印出有对应的号码。

v-if的逻辑是，如果拿到的数字不是在[888,1000,1200,2000,3000,3001]当中的话，就提示说该用户没有权限。
v-else的逻辑是，如果不满足v-if的条件，就跳转界面。

出现的问题：为什么底下的这些框框看起来高矮不一？并且当切换为超级管理员与测试人员的时候，底下的框框长度也不一样？