vue+elementui，v-if控制按钮、表格中的复选框、表格中的列显示隐藏失败
vue+elementui，v-if控制按钮、表格中的复选框、表格中的列显示隐藏失败
管理员才可以对数据进行添加，删除，勾选复选框，修改；普通用户不能。
管理员的position_id为0，普通用户为1
于是我就分别在添加按钮、以及复选框、操作列上使用v-if来根据是否是管理员来控制是否显示
<template>
<div>
<el-form :inline="true" :model="accountform" class="demo-form-inline">
<el-form-item v-if = "position===0">
<el-button class="color2" icon="el-icon-circle-plus" @click="addUserFormShow = true">添加用户el-button>
el-form-item>
el-form>
<div class="table">
<el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column width="35" v-if = "position===0" >
<template slot="header">
<i class="el-icon-delete" style="color: black" @click="selectionDelUser">i>
template>
el-table-column>
<el-table-column type="selection" width="55" align="center" v-if = "position===0">
el-table-column>
<el-table-column prop="id" label="编号" width="80">
el-table-column>
<el-table-column prop="username" label="姓名" >
el-table-column>
<el-table-column prop="account" label="账号"> el-table-column>
<el-table-column prop="gender" label="性别"> el-table-column>
<el-table-column prop="tel" label="电话"> el-table-column>
<el-table-column prop="position_id" label="用户类型" :formatter="Format"> el-table-column>
<el-table-column prop="status" label="状态"> el-table-column>
<el-table-column label="操作" v-if = "position===0" >
<template slot-scope="scope">
<el-button size="mini" @click="toEditUserAccount(scope.row)">编辑el-button>
<el-button size="mini" type="danger" @click="DeleteUser(scope.row)">删除el-button>
template>
el-table-column>
el-table>
div>
template>
<script>
export default {
data() {
return {
position: "",
tableData: [],
formLabelWidth: "120px",
accountform: {
id:0,
user_id: 0,
username: "",
account: "",
gender: "",
tel: "",
position_id: "",
status: "",
remark: "",
},
position_ids: [
{
value: '0',
label: '管理员',
},
{
value: '1',
label: '普通用户',
},
],
userSelection: [],
};
},
methods: {
async loadUser(pageNo, pageSize) {
var account = sessionStorage.getItem("user");
const { data: res } = await this.$axios.post(
"http://localhost:8801/selUserAccountByParam?account=" + account
);
this.position = res.position_id;
let url = "http://localhost:8801/user";
if (pageNo > 0 || pageSize > 0) {
url =
"http://localhost:8801/user?pageNo=" +
pageNo +
"&pageSize=" +
pageSize;
}
const { data } = await this.$axios.get(url);
console.log(data);
this.tableData = data.list;
this.total = data.total;
},
};
使用管理员账户登录，按理来说应该出现这样的页面
但是却出现了这样的页面
请问是哪里错了呢？怎么解决这个问题呢？
你用的三等做判断还会校验数据类型你的position 是不是字符串型 或者判断先改成v-if = "position!=1"
<template>
<div>
<el-form :inline="true" :model="accountform" class="demo-form-inline">
<el-form-item v-if = "position==0">
<el-button class="color2" icon="el-icon-circle-plus" @click="addUserFormShow = true">添加用户</el-button>
</el-form-item>
</el-form>
<div class="table">
<el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column width="35" v-if = "position==0" >
<template slot="header">
<i class="el-icon-delete" style="color: black" @click="selectionDelUser"></i>
</template>
</el-table-column>
<el-table-column type="selection" width="55" align="center" v-if = "position==0">
</el-table-column>
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="username" label="姓名" >
</el-table-column>
<el-table-column prop="account" label="账号"> </el-table-column>
<el-table-column prop="gender" label="性别"> </el-table-column>
<el-table-column prop="tel" label="电话"> </el-table-column>
<el-table-column prop="position_id" label="用户类型" :formatter="Format"> </el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column label="操作" v-if = "position==0" >
<template slot-scope="scope">
<el-button size="mini" @click="toEditUserAccount(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="DeleteUser(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
position: "",
tableData: [],
formLabelWidth: "120px",
accountform: {
id:0,
user_id: 0,
username: "",
account: "",
gender: "",
tel: "",
position_id: "",
status: "",
remark: "",
},
position_ids: [
{
value: '0',
label: '管理员',
},
{
value: '1',
label: '普通用户',
},
],
userSelection: [],
};
},
methods: {
async loadUser(pageNo, pageSize) {
var account = sessionStorage.getItem("user");
const { data: res } = await this.$axios.post(
"http://localhost:8801/selUserAccountByParam?account=" + account
);
this.position =parseInt(res.position_id);
let url = "http://localhost:8801/user";
if (pageNo > 0 || pageSize > 0) {
url =
"http://localhost:8801/user?pageNo=" +
pageNo +
"&pageSize=" +
pageSize;
}
const { data } = await this.$axios.get(url);
console.log(data);
this.tableData = data.list;
this.total = data.total;
},
};
数据库是这样的
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/1061129
- 这篇博客你也可以参考下：elementui中表头中使用下拉菜单组件并使用v-if控制列的显示与否，导致渲染出两个相同的下拉菜单
- 除此之外, 这篇博客: 【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式中的 3. 添加自定义面包屑 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
src-->layout-->component-->Navbar.vue
需要修改Navbar的高度，并添加面包屑
// Navbar.vue <template> <div class="navbar"> <div style="height: 50px; background: #fff"> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" /> --> <div class="right-menu"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" > <div class="avatar-wrapper"> <img :src="avatar" class="user-avatar" /> <i class="el-icon-caret-bottom" /> </div> <el-dropdown-menu slot="dropdown"> <router-link to="/user/profile"> <el-dropdown-item>个人中心</el-dropdown-item> </router-link> <!-- <el-dropdown-item @click.native="setting = true"> <span>布局设置</span> </el-dropdown-item> --> <el-dropdown-item divided @click.native="logout"> <span>退出登录</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> <!-- 自定义面包屑 --> <div class="new-breadcrumb"> <i class="el-icon-location-outline" style="margin-left: 20px; margin-top: 16px" ></i> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> </div> </div> </template>// navbar的height：100px .new-breadcrumb { height: 50px; background: rgb(240, 241, 243); display: flex; }由于修改了navbar的高从50px--->100px,会影响页面整个的高度。（整个页面的高度是100vh，下面内容app-main的高度就是100vh-navbar的高度）因此需要修改app-main高度
src--> layout-->components-->AppMain.vue
.app-main { /* 100= navbar 100 */ min-height: calc(100vh - 100px); // 原来是50px width: 100%; position: relative; overflow: hidden; }但是希望去掉首页/，因为不是所有页面都是通过首页进入的。
src-->components-->Breadcrumb-->index.vue
注释掉默认的首页即可
// if (!this.isDashboard(first)) { // matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) // }