实习随笔-8、antd-vue Table组件根据权限在对应行渲染操作

序言:

需求:最近在开发一个功能,是需要根据用户身份与建议书的状态两者的结合来得出用户所拥有的操作,并需要渲染到对应的表格行上面。由于本项目是用antd-vue来进行开发的,笔者也是第一次用这套组件,着实费了我一些功夫才搞出来,用的是比较直观的方法,优化上尚有欠缺,希望各路大佬补充

需求
在这里插入图片描述
实现:
在这里插入图片描述

在这里插入图片描述

代码实现:

一、首先,我们要想的是,怎么将这些操作渲染到表格的操作列上面

1、我们先来看看,antd-vue Table组件的api,这时我们发现了,在Table 的Column里面,有这样的api,是不是很熟悉,没错,这就是插槽!
在这里插入图片描述

2、有了插槽后,我们就可以这样实现,附上代码

template部分:

 <a-table :columns="columns" :data-source="dataSource" :pagination="pagination" @change="changePage" >
 	<template slot="actions" slot-scope=" text , record ">
 		<a @click="actionLook">查看</a>
 	</template>
  </a-table>

script部分:

const columns = [ {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions',
    scopedSlots: { customRender: 'actions' },
    width:300,
    align:'center',
  },
];

注意!我这里只是截取了操作这一部分的代码

二、我怎么根据用户的身份以及项目建议书的状态来进行按需渲染呢

这里就得提到一个表格特有的参数了,通过这个参数,我们可以拿到表格每一行的数据,这个参数就是record
用法:例如,表格行中有一个属性是name,那么,我要拿到这个每一行name的值,我就可以用过record.name来拿到
言归正传,既然我们有了这个参数,那么我们是不是就可以拿到表格中的作者名字、项目建议书状态、提审人名字,拿到这几个数据后,再通过v-if进行判断就可以了
附上代码:

<!-- 表格 -->
                <a-table :columns="columns" :data-source="dataSource" :pagination="pagination" @change="changePage" >
                    <template slot="actions" slot-scope=" text , record ">
                        <a @click="actionLook(record)">查看</a>
                        <a @click="actionCopy()" class="mgl10">复制</a>
                        <a @click="actionPreview()" class="mgl10" target="view_window" :href="record.pdfpath">预览</a>
                        <a @click="actionEdit()" v-if="stateShowList.indexOf(record.state)!=-1 && author.indexOf(record.author)!=-1" class="mgl10">编辑</a>
                        <a @click="clickFlag && actionArraignment(record.author,record.reviewer)" v-if="(stateShowList.indexOf(record.state)!=-1 && author.indexOf(record.author)!=-1) || (stateShowList1.indexOf(record.state) !=-1 &&reviewer.indexOf(record.reviewer) !=-1)" class="mgl10">提审</a>
                        <a v-if="stateShowList.indexOf(record.state)!=-1 && author.indexOf(record.author)!=-1" class="mgl10">删除</a>
                        <a @click="actionDownload()" v-if="stateShowList2.indexOf(record.state)!=-1" class="mgl10">下载</a>
                        <a @click="actionShare(record.key)" v-if="stateShowList2.indexOf(record.state)!=-1" class="mgl10" >分享</a>
                        <a @click="actionViewRecords()" v-if="stateShowList2.indexOf(record.state)!=-1" class="mgl10" >查看记录</a>
                        <a @click="actionWhiteList()" v-if="stateShowList2.indexOf(record.state)!=-1 && (reviewer.indexOf(record.reviewer)!=-1 || author.indexOf(record.author)!=-1 )" class="mgl10">白名单</a>
                        <a @click="actionFile()" v-if="stateShowList2.indexOf(record.state)!=-1 && (reviewer.indexOf(record.reviewer)!=-1 || author.indexOf(record.author)!=-1 )" class="mgl10" >归档</a> 
                    </template>
                </a-table>

data中的数据,其中,author和reviewer需要后台传入当前用户身份再去进行赋值

stateShowList:['草稿','未通过'], //建议书状态列表
stateShowList1:['待审核'],//建议书状态列表
stateShowList2:['终稿'],//建议书状态列表
author:[],//登录进去的作者
reviewer:[],//提审人

赋值的代码::

if(res.code==1){
       this.author=res.name;
        }
        if(res.code==2){
          this.reviewer=res.name;
        }

博客记录代码,代码记录生活,一切都是为了改BUG

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值