在使用element-ui组件库时，通常需要二次封装组件
1. 封装 table+page 组件
<template>
<div class="table_page">
<el-table
:row-key="getRowKey"
v-loading="options.loading"
:data="dataSource"
:max-height="options.maxHeight"
:stripe="options.stripe"
:border="options.border"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
highlight-current-row
:cell-style="cellStyle"
>
<!--selection选择框-->
<el-table-column
v-if="options.mutiSelect"
type="selection"
:reserve-selection="true"
style="width:50px"
align="center"
>
</el-table-column>
<!--序号-->
<el-table-column
v-if="options.index"
label="序号"
type="index"
width="50"
align="center"
>
</el-table-column>
<!--数据列-->
<template v-for="(column, index) in columns">
<el-table-column
:key="index"
:prop="column.prop"
:label="column.label"
:align="column.align || 'center'"
:width="column.width"
:fixed="column.fixed"
show-overflow-tooltip
>
<template slot-scope="scope">
<!-- 含有click函数 -->
<template v-if="column.onClick">
<span
@click.stop="column.onClick(scope.row, scope.$index, scope)"
>{{ scope.row[column.prop] }}</span
>
</template>
<!-- 含有render函数 -->
<template v-else-if="column.render">
<RenderDom
:row="scope.row"
:index="index"
:render="column.render"
/>
</template>
<!-- 有img图片显示 -->
<template v-else-if="column.img">
<img :src="scope.row[column.prop]" alt="加载失败" />
</template>
<!-- 没有render函数且没有图片要显示 -->
<template v-else>
<span>{{ scope.row[column.prop] }}</span>
</template>
<!-- button 操作按钮 caseStatus-->
<template v-if="column.button">
<template v-for="(btn, i) in column.group">
<el-button
:key="i"
:type="btn.type"
:round="btn.round"
:size="btn.size || 'mini'"
:icon="btn.icon"
:plain="btn.plain"
@click.stop="btn.onClick(scope.row, scope.$index, scope)"
>{{ btn.name }}</el-button
>
</template>
</template>
<!-- slot 你可以其他常用项 -->
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination"
background
:total="pagination.total"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleIndexChange"
style="padding: 20px;text-align: right"
></el-pagination>
</div>
</template>
<script>
export default {
components: {
RenderDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index
};
if (data.props.column) params.column = data.props.column;
return data.props.render(h, params);
}
}
},
props: {
dataSource: Array, // table内容数据
options: Object, // 表格参数控制 maxHeight、stripe 等等...
columns: Array, // 表头
fetch: {
type: Function,
default: function() {}
}, // 获取数据的函数
pagination: Object, // 分页，不传则不显示
typeTable: String
},
data() {
return {};
},
created() {
// 传入的options覆盖默认设置
this.$parent.options = Object.assign(
{
// maxHeight: 500,
stripe: false, // 是否为斑马纹
border: false
},
this.options
);
this.options.initTable && this.fetch();
},
methods: {
// table 文本颜色
cellStyle(row, column, rowIndex, columnIndex) {
if (row.column.label == "当前状态" && row.row.status == 1) {
return "color:#0ED1AA";
} else if (row.column.label == "当前状态" && row.row.status == 2) {
return "color:#F3384F";
}
},
// pageSize 改变时触发事件
handleSizeChange(size) {
this.pagination.pageSize = size;
this.fetch();
},
// currentPage 改变时触发事件
handleIndexChange(current) {
this.pagination.pageIndex = current;
this.fetch();
},
// 多选框选择变化触发事件
handleSelectionChange(selection) {
this.$emit("selection-change", selection);
},
// 点击table某一行时触发事件
handleRowClick(row, event, column) {
// console.log(row, '父组件')
this.$emit("handleRowClick", row, event, column);
},
// 翻页时，记住上一页的勾选标识
getRowKey(row) {
return row.id;
}
}
};
</script>
2. 引用table 组件
<template>
<div class="home">
<tablePage
:columns="columns"
:dataSource="tableData"
:options="options"
:fetch="fetchTableData"
:pagination="pagination"
/>
</div>
</template>
<script>
import tablePage from "@/components/table-page/table-page";
export default {
name: "Home",
components: {
tablePage
},
data() {
return {
columns: [
{
prop: "id",
label: "编号"
},
{
prop: "name",
label: "banner图名称"
},
{
img: true,
prop: "img",
label: "预览图"
},
{
prop: "where",
label: "位置"
},
{
prop: "type",
label: "banner图性质",
onClick: (row, index) => {
// 图片不可点击，链接时可点击
console.log(row, "row");
}
},
{
prop: "time",
label: "添加时间"
},
{
prop: "status",
label: "当前状态",
render: (h, params) => {
console.log();
return h("span", params.row.status == 1 ? "启用中" : "禁用中");
}
},
{
button: true,
label: "操作",
group: [
{
name: "编辑",
type: "primary",
round: true,
plain: false,
onClick: (row, index) => {
}
}
]
}
],
tableData: [
{
id: 1,
name: "武汉救援2",
img: "http://www.ahgame.com/uploads/allimg/141110/1-1411101F433.jpg",
where: "1",
type: "图片",
time: "2020-06-19",
status: 1
},
{
id: 2,
name: "武汉救援",
img: "http://www.ahgame.com/uploads/allimg/141110/1-1411101F433.jpg",
where: "2",
type: "h5",
time: "2020-06-19",
status: 2
}
],
// 分页
pagination: {
total: 40,
pageIndex: 1,
pageSize: 10
},
options: {
stripe: true, // 斑马纹
mutiSelect: false, // 多选框
index: false, // 显示序号， 多选则 mutiSelect
loading: false, // 表格动画
initTable: true // 是否一挂载就加载数据
}
};
},
methods: {
fetchTableData() {}
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
}
</style>
