·场景:Page需要使用PageLayout组件,PageLayout中使用了封装好el-table的组件Table,现需要给表格中的cell添加点击事件,所以需要插槽来进行传值。
·代码:
组件Table
<template>
<!-- 表格分页 -->
<div class="table_box">
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
:prop="item.prop"
:label="item.label"
v-for="(item, index) in columns"
:key="index"
:fixed="item.fixed"
:width="item.width"
:sortable="item.sortable"
:min-width="item.minWidth"
>
<template slot-scope="scope">
<slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
props: {
tableData: Array,
columns: Array,
total: Number,
currentPage: Number,
flag: {
type: Boolean,
default: true,
},
},
data() {
return {
// currentPage: 1,
};
},
created() {},
methods: {
handleSizeChange(val) {
this.$emit("changeSize", val);
},
handleCurrentChange(val) {
this.$emit("changeCurrent", val);
},
//表单选择全选
handleSelectionChange(val) {
// console.log(val, "0.0");
this.$emit("handleSelectionChange", val);
},
},
};
</script>
<style lang="scss" scoped>
.el-pagination {
// margin-top: 20px;
padding: 10px 20px;
text-align: right;
// box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
background: #fff;
}
</style>
组件PageLayout
<Table :columns="pageData.tableConfig.columns" :tableData="pageData.tableConfig.data" :total="pageData.tableConfig.total" @currentChange="currentChange" :isShow="pageData.tableConfig.isShow" :current="currentPage" :objectSpanMethod="pageData.tableConfig.objectSpanMethod">
<template v-for="(tItem) in pageData.tableConfig.columns" :slot="tItem.slot" slot-scope="scope">
<template v-if="tItem.slot">
<slot :name="tItem.slot" :row="scope.row"></slot>
</template>
</template>
</Table>
组件Page
<Layout :config="config" @tabChange="tabChange" @currentChange="currentChange" @scrollLoad="scrollLoad" @updateCurrentPage="updateCurrentPage" v-bind="$attrs" v-loading="layoutLoading" @closeDrawer="closeDrawer" :openDrawer="openDrawer">
<template v-for="(item,index) in config.tableConfig.columns" :slot="item.slot" slot-scope="scope">
<div v-if="item.slot" :key="index">
<el-button type="text" @click="jumpPage(scope.row[item.slot],item.slot,scope.row)">{{scope.row[item.slot]}}</el-button>
</div>
</template>
</Layout>
//表格数据
tableConfig: {
isShow: true,
columns: [{
prop: "caseType",
label: "诉讼类型",
align: "center",
},
{
prop: "caseNum",
label: "诉讼数量",
align: "center",
},
{
slot: "percent",
label: "占比",
align: "center",
}
],
data: [],
total: 0,
},