首先!iview-admin是一个非常好用的管理系统前端模板!不可否认!先吹一波,再走程序!没事吹一吹,身体好,心情好,腰更好!
回归主题,想要跟我飙车的到群里@人间蒸发!下边开始看代码!!!!
1.第一步看一下,iview 中table怎么用的!非常简单一行代码你就可以引入使用!
<Table size="large" @on-selection-change="selectOption" stripe ref="selection" :columns="tableCol" :data="tableData"></Table>
//tablecol就是列名,tableData,就是你要渲染的数据。 简单吧,当然你肯定需要在 return里边定义这个对象,
我给大家上个截图,一起look look!
这二位,掌握你渲染table数据的生死大权!怎么渲染呢?请往下看!
一个title一个key!具体是什么不必要多说了,大家也不傻一看就明白了!
讲一点别的,就是render给咱们这一列数据加条件,你可以加样式,也可以做判断!上个代码,感兴趣的小伙伴可以玩一波!当然想要用好这个render,那就得多看看文档了,用处很大!
{ title: '执行人', key: 'name', render: (h, params) => { // console.log("++++++"+JSON.stringify(params.row.name)) var oName = params.row.name; if (oName === null) { oName = "此通告没有执行人"; } return h('div', [ h('span', {}, oName) ]) } }
2.原生的iview自己封装的table定义列名的部分是这样的。
handleColumns (columns) {
this.insideColumns = columns.map((item, index) => {
let res = item
if (res.editable) res = this.suportEdit(res, index)
if (res.key === 'handle') res = this.surportHandle(res)
return res
})
}
我开始想的就是把这个组件给它改了,根据我的权限去自定义这个列名!于是我找到我的好朋友给我写了一个替换它!
handleColumns (columns) {
this.insideColumns = columns.map((item, index) => {
let res = item
let checkAccess = res.checkAccess
let access = store.state.user.access
if (checkAccess) {
let myStatu = false
for (var i in checkAccess) {
if (hasOneOf(checkAccess[i], access)) {
myStatu = true
}
}
if (!myStatu) {
columns.splice(index, 1)
}
} else {
if (res.editable) res = this.suportEdit(res, index)
if (res.key === 'handle') res = this.surportHandle(res)
}
return res
})
},
可是不行!但我没有放弃!我又找了一份!!!!依旧替换他!跟这玩意死磕啊!这个图片我写清楚逻辑了额,
结果还是不行!但是网上没有例子啊!仅有一个,但~不好使!
好吧好吧!!!那就想别的招吧,改原生的组件是不行了!单是还得做啊!也就是从上往下一步步由高端操作,堕落为垃圾操作!
剑走偏锋!!!!
我朋友给我出了一招,既然非得按权限显示这个列!那么咱的这个列又是个数组,符合权限,咱就把数组里的这个元素留着,不符合就给它干掉!
ok那就这么着,为了实现而实现!这样不好!!但需求就是这样不写不行啊!页面的全局初始化方法里写一个权限判断!!!
// 权限判断,这里权限判断你跟我的不一样哦!注意改成自己的! if (!this.superAdmin) { //不符合权限的,你就没有操作这个列名!!! this.tableCol = this.tableCol.filter(col => col.title !== '操作' ) }
不加这个之前页面是!
加上以后!
ok!这个博客没啥子技术含量,but如果你小心看到了,要求根据权限去一整列,咋办!就是么干呗!反正你百度一下午查不到啊!嘿嘿,偶尔做个苟且的人吧,那么认真谁能知道啊,费这么半天劲就去这么个列名!该他娘放弃就放弃!
拜了个拜!!!
后经过我的二次研究!原来这个iview-admin的 table组件啊,还是走的iview的table组件,并不是iview-admin里边封装的,iview-admin啊,把iview进行二次封装!这个是要注意的!我后来看iview的文档,惊喜的发现,原来iview的默认方案就是我这个博客的最终方法,尴个了尬!想要对iview-admin二次封装的组件,你得再次引入!
import Tables from '_c/tables'
columns: [ {title: 'Name', key: 'name', sortable: true}, {title: 'Email', key: 'email', editable: true}, {title: 'Create-Time', key: 'createTime'} ]
//声明组件名 name: 'tables_page', components: { Tables },
//运用 <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
handleDelete (params) { console.log(params) }
这样就可以用iview-admin的组件了!
当然这个是得交给一个专业前端去做了!
再次拜拜!!!