element-ui封裝---tableList

重頭戲，table

 裏面也是借鑑了大佬的封裝思路，可是仍是有點小問題，還沒啥思路，就是表格中，操做欄操做項，如何根據每行的數據控制。有點蒙圈。還望有大佬指教。上代碼：

<template>
    <div id="tableList">
        <el-table :data="tableData"
                  size="medium"
                  @cell-click="cellClick"
                  @row-click="rowClick"
                  :header-cell-style="{background:'#409EFF',color:'#fff'}"
                  border
                  fit
                  stripe>
            <!-- 是否多選 -->
            <el-table-column type="selection"
                             v-if="options.mutiSelect"></el-table-column>
            <!-- 是否展現序列號 -->
            <el-table-column type="index"
                             v-if="options.isindex"
                             :index="indexMethod"></el-table-column>
            <template v-for="(v,k) in headerData">
                <!-- 常規列數據 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="!v.type"
                                 :key="`v.label${k}`"
                                 :formatter="v.format"
                                 :prop="v.prop">
                </el-table-column>
                <!-- 圖片數據列 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="v.type=='image'"
                                 :key="`v.label${k}`">
                    <template slot-scope="scope"
                              :formatter="v.format">
                        <img class="cell-img"
                             :src="scope.row[v.prop]"
                             :formatter="v.format"
                             alt="">
                    </template>
                </el-table-column>
                <!-- 處理type=operation，自定義按鈕 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="v.type=='operation'"
                                 :key="`v.type${k}`">
                    <!-- 處理自定義操做中的按鈕 -->
                    <template slot-scope="scope">
                        <el-link v-for="(item,index) in v.operationData"
                                 :key="`item.label${index}`"
                                 :size="item.size||'mini'"
                                 class="operateLink"
                                 :type="item.type"
                                 @click="btnClick(item,index,scope.row)">{{item.label}}</el-link>
                    </template>
                </el-table-column>
            </template>

        </el-table>
        <div class="block"
             v-if="options.pagination">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pagination.currentPage"
                           :page-sizes="pagination.pageSizes"
                           :page-size="pagination.pageSize"
                           :layout="pagination.layout"
                           :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "tableList",
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        options: {
            type: Object,
            default: data => {
                return (data = {
                    mutiSelect: false, //boolean 是否多選
                    isindex: false, //boolean 是否展現序列號
                    stripe: true, //boolean 斑馬紋
                    border: true, //boolean 縱向邊框
                    size: "medium", //String  medium / small / mini  table尺寸
                    fit: true, //自動撐開
                    pagination: true //是否有分頁
                });
            }
        },
        pagination: {
            type: Object,
            default: data => {
                return (data = {
                    currentPage: 1,
                    pageSizes: [10, 20, 30],
                    pageSize: 10,
                    layout: "total, sizes, prev, pager, next, jumper",
                    total: 0
                });
            }
        },
        headerData: {
            type: Array,
            default: [
                { label: "日期", prop: "date" },
                { label: "姓名", prop: "name" },
                { label: "地址", prop: "address" },
                { label: "頭像", prop: "image", type: "image", width: "120" },
                {
                    label: "操做",
                    type: "operation",
                    operationData: [
                        { label: "編輯" },
                        { label: "刪除", type: "danger" },
                        { label: "編輯", type: "primary" }
                    ]
                }
            ]
        },
        formatters(row, column) {
            console.log(row, "format");
            console.log(column, "format");
        }
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        cellClick(row, column, cell, event) {},
        rowClick(row, column, cell, event) {
            this.$emit("rowClick", row, column, cell, event);
        },
        edit(index, row) {},
        btnClick(item, index, v) {
            this.$emit("btnClick", item, index, v);
        },
        // 序列號相關
        indexMethod(index) {
            return index + 1;
        },
        // 分頁相關
        handleSizeChange(val) {
            this.$emit("pageCountChange", val);
        },
        handleCurrentChange(val) {
            this.$emit("pageChange", val);
        }
    }
};
</script>
<style lang="less" scoped>
.cell-img {
    width: 80px;
    height: 80px;
}
.operateLink {
    padding: 4px;
}
</style>

下面是調用:

<template>
    <layout>
        <div id="articleList">
            <div class="headers">
                <el-row :gutter="20">
                    <el-col :span="6"
                            class="flexCol">
                        <label for="">標題：</label>
                        <el-input></el-input>
                    </el-col>
                    <el-col :span="6"
                            class="flexCol">
                        <label for="">關鍵字：</label>
                        <el-input></el-input>
                    </el-col>
                    <el-col :span="6"
                            class="flexCol">
                        <label for="">來源：</label>
                        <el-input></el-input>
                    </el-col>
                    <el-col :span="6"
                            class="flexCol">
                        <label for="">所屬機構：</label>
                        <el-input></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"
                            class="flexCol">
                        <label for="">姓名：</label>
                        <el-input></el-input>
                    </el-col>
                </el-row>
                <el-row right>
                    <el-col :span="22">

                        <el-button type="primary"
                                   icon="el-icon-search">搜索</el-button>
                        <el-button icon="el-icon-delete">重置</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary"
                                   @click="AddArticleEv"
                                   icon="el-icon-plus">新增</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-divider></el-divider>
            <tableList :pagination="pagination"
                       :headerData="headerData"
                       :tableData="articleData"
                       @pageChange="pageChange"
                       @btnClick="btnClick"></tableList>
        </div>
    </layout>
</template>
<script>
export default {
    data() {
        return {
            pagination: {
                currentPage: 1,
                pageSizes: [10, 20, 30],
                pageSize: 10,
                layout: "total, prev, pager, next",
                total: 0
            },
            articleData: new Array(20).fill({ title: "2" }),
            headerData: [
                { label: "標題", prop: "title" },
                {
                    label: "封面圖",
                    prop: "cover1",
                    type: "image",
                    width: "120"
                },
                { label: "所屬機構", prop: "org_name" },
                { label: "做者", prop: "author_id", width: 80 },
                { label: "來源", prop: "source_name", width: 80 },
                { label: "關鍵詞", prop: "keywords", width: 80 },
                {
                    label: "添加時間",
                    prop: "created_at"
                    // 數據格式化
                    // format: data => {
                    //     return new Date(data.created_at * 1000).format(
                    //         "yyyy-MM-dd hh:mm"
                    //     );
                    // }
                },
                {
                    label: "最後編輯時間",
                    prop: "updated_at"
                    // format: data => {
                    //     return new Date(data.created_at * 1000).format(
                    //         "yyyy-MM-dd hh:mm"
                    //     );
                    // }
                },
                {
                    label: "操做",
                    type: "operation",
                    width: "210",
                    operationData: [
                        { label: "編輯" },
                        { label: "刪除", type: "danger" },
                        { label: "查看", type: "primary" }
                    ]
                }
            ]
        };
    },
    mounted() {
        // this.GetArticleList();
    },
    methods: {
        // 獲取數據
        // 操做按鈕點擊事件
        btnClick(item, index, v) {
            console.log(item, index);
            if (item.label === "編輯") {
                console.log("編輯");
            }
            if (item.label === "刪除") {
                this.$alert("肯定刪除該文章？")
                    .then(() => {
                        console.log(1);
                    })
                    .catch(() => {
                        console.log(2);
                    });
            }
            if (item.label === "查看") {
                console.log("查看");
            }
        },
        AddArticleEv() {
            this.$router.push({ name: "article_add" });
        },
        // 分頁相關
        pageChange(val) {
            console.log(`第${val}頁`);
            this.pagination.currentPage = val;
            this.GetArticleList();
        },
        pageCountChange(val) {
            console.log(`每頁${val}條`);
        }
    }
};
</script>
<style lang="less" scoped>
</style>

就是這裏一塊：

我想根據每一行的數據，判斷這裏有些沒有編輯選項，有些沒有刪除選項這種。