实习随笔-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