iView组件动态控制表格列的显示与隐藏
动态控制iView表格列的显示与隐藏1. 根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列2. 列表中为金额的列,其值如果全为0则该列不展示
·
需求:
- 根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列
- 列表中为金额的列,其值如果全为0则该列不展示
实现:
<!-- 此处的Tablepage为重新封装过后的表格组件 -->
<template>
<div>
<Tablepage ref="table" :data="listData" :total="total" :columns="newColumns" :pagination="true" border @change-page="onChangePage" @reset="onReset" @on-current-change="onCurrentChange" @on-selection-change="onSelectionChange" show-btn :init-data="false">
<template slot="searchform">
<!-- ......此处省略查询条件 -->
</template>
</Tablepage>
</div>
</template>
<script>
import { rowChangeMixin } from '@/mixins/table'
import { numFormat } from '@/libs/util'
import { getListData } from '@/api/reports'
import { getUserInfo } from '@/api/user'
export default {
name: 'HelloWorld',
mixins: [rowChangeMixin],
data() {
return {
queryParams: {
empNo: '',
deptName: '',
// ...
},
userType: null, // 1-业务经理 2-大区经理 0-其他
newColumns: [],
columns: [
{
type: 'selection',
width: 50,
align: 'center'
},
{
type: 'index',
width: 50,
align: 'center'
},
{
title: '工号',
key: 'empNo',
width: 80,
align: 'center'
},
{
title: '姓名',
key: 'empName',
width: 100
},
{
title: '部门',
key: 'deptName',
minWidth: 180
},
{
title: '金额1',
key: 'money1',
width: 120,
align: 'right',
isMoney: true,
render(h, params) {
return h('span', null, numFormat(params.row.money1))
}
},
{
title: '金额2',
key: 'money2',
width: 120,
align: 'right',
isMoney: true,
render(h, params) {
return h('span', null, numFormat(params.row.money2))
}
},
{
title: '金额3',
key: 'money3',
width: 120,
align: 'right',
isMoney: true,
render(h, params) {
return h('span', null, numFormat(params.row.money3))
}
},
{
title: '金额4',
key: 'money4',
width: 120,
align: 'right',
isMoney: true,
render(h, params) {
return h('span', null, numFormat(params.row.money4))
}
},
{
title: '金额5',
key: 'money5',
width: 120,
align: 'right',
isMoney: true,
render(h, params) {
return h('span', null, numFormat(params.row.money5))
}
}
],
list: (queryParams) => {
return getListData(Object.assign({ ...this.queryParams }, queryParams))
}
}
},
mounted() {
this.getUserInfo()
},
methods: {
// 获取当前登录用户角色
getUserInfo() {
getUserInfo().then(res => {
let data = res.data.data
this.userType = data.roleName == '业务经理' ? 1 : data.roleName == '大区经理' ? 2 : 0
// 设置当前登录用户为业务经理或大区经理时不展示业务经理查看状态和大区经理查看状态列
if (this.userType != 1 && this.userType != 2) {
let arr = [{
title: '业务经理查看状态',
key: 'ifManagerView',
align: "center",
width: 70,
render(h, { row }) {
return h("span", {
style: {
color: row.ifManagerView == '关闭' ? '#F56C6C' : '#67c23a'
}
}, row.ifManagerView)
}
},
{
title: '大区经理查看状态',
key: 'ifBigManagerView',
width: 70,
align: "center",
render(h, { row }) {
return h("span", {
style: {
color: row.ifBigManagerView == '关闭' ? '#F56C6C' : '#67c23a'
}
}, row.ifBigManagerView)
}
}]
this.columns.push(...arr)
}
this.loadData(true)
})
},
// 获取列表数据
getList() {
this.setColumnsStatus(res.data.data.list)
this.listData = res.data.data.list
this.total = res.data.data.total
},
// 重置
onReset() {
let data = this.$options.data().queryParams
Object.assign(this.queryParams, data)
this.onRefresh()
},
// 设置列表总金额全为0的列隐藏
setColumnsStatus(data) {
let newColumns = []
for (let colItem of this.columns) {
let colLabel = colItem.key;
if (colLabel && colItem.isMoney) {
for (let item of data) {
if (item[colLabel] && item[colLabel] !== '0') {
newColumns.push({ ...colItem })
break
}
}
} else {
newColumns.push({ ...colItem })
}
}
this.newColumns = newColumns
},
// ...... 此处省略其他代码
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)