里面也是借鉴了大佬的封装思路，但是还是有点小问题，还没啥思路，就是表格中，操作栏操作项，如何根据每行的数据控制。有点蒙圈。还望有大佬指教。上代码：
<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>
就是这里一块：
我想根据每一行的数据，判断这里有些没有编辑选项，有些没有删除选项这种。