序言：

需求：最近在開發一個功能，是需要根據使用者身份與建議書的狀態兩者的結合來得出使用者所擁有的操作，並需要渲染到對應的表格行上面。由於本專案是用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