最代码人间蒸发的gravatar头像
最代码人间蒸发2019-07-10 20:00:00
沙雕程序员(四)——iview-admin table动态列名实现到放弃的故事!

首先!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!

沙雕程序员(四)——iview-admin table动态列名实现到放弃的故事!

这二位,掌握你渲染table数据的生死大权!怎么渲染呢?请往下看!

沙雕程序员(四)——iview-admin 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
      })
    },

 可是不行!但我没有放弃!我又找了一份!!!!依旧替换他!跟这玩意死磕啊!这个图片我写清楚逻辑了额,

沙雕程序员(四)——iview-admin table动态列名实现到放弃的故事!

结果还是不行!但是网上没有例子啊!仅有一个,但~不好使!

 

好吧好吧!!!那就想别的招吧,改原生的组件是不行了!单是还得做啊!也就是从上往下一步步由高端操作,堕落为垃圾操作!

剑走偏锋!!!!

我朋友给我出了一招,既然非得按权限显示这个列!那么咱的这个列又是个数组,符合权限,咱就把数组里的这个元素留着,不符合就给它干掉!

ok那就这么着,为了实现而实现!这样不好!!但需求就是这样不写不行啊!页面的全局初始化方法里写一个权限判断!!!

// 权限判断,这里权限判断你跟我的不一样哦!注意改成自己的!
if (!this.superAdmin) {
      //不符合权限的,你就没有操作这个列名!!!
      this.tableCol = this.tableCol.filter(col => col.title !== '操作' )
}

不加这个之前页面是!

沙雕程序员(四)——iview-admin table动态列名实现到放弃的故事!

加上以后!

沙雕程序员(四)——iview-admin table动态列名实现到放弃的故事!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的组件了!

当然这个是得交给一个专业前端去做了!

 

再次拜拜!!!


打赏

已有1人打赏

最代码官方的gravatar头像

分享到:

最近浏览
ldc199375 LV95小时前
月亮月亮星星
fuhaifengok1989 LV17小时前
星星
徐沂00 LV512小时前
月亮星星
jy3452112小时前
暂无贡献等级
zccmp20 LV2113小时前
太阳月亮星星
zxf2342 LV213小时前
星星星星
12555555 LV513小时前
月亮星星
cjiankai LV6昨天
月亮星星星星
vclulu LV2昨天
星星星星
阿拉斯加 LV2昨天
星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友