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;
},
};
使用管理员账户登录，按理来说应该出现这样的页面
但是却出现了这样的页面
请问是哪里错了呢？怎么解决这个问题呢？
