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>

就是这里一块：

我想根据每一行的数据，判断这里有些没有编辑选项，有些没有删除选项这种。