效果图
一.数据驱动 表格的二次封装
表格封装比较特殊 这里需要用到插槽配合使用以满足多元化需求
这里如果你理解了插槽这里将会是很好理解,如果你对插槽不是很理解, 那么请继续往最下面翻有插槽详解
(1)子组件
<template>
<div class="use-main">
<div class="use-body">
<div class="use-btns">
// 普通插槽 占位符 这里我们在父组件内去调用这个占位符
<slot name="add" />
// 表格新增导入 导出 按钮控制 可以在组件内部 使用 也可以使用插槽的方式在父组件当中使用
<el-button
v-if="tableProps.isadd"
type="primary"
icon="el-icon-plus"
size="small"
@click="add"
>新增</el-button>
<el-button v-if="tableProps.isimport" type="primary" icon="el-icon-plus">导入
</el-button>
<el-button v-if="tableProps.isexport" type="primary" icon="el-icon-plus">导出
</el-button>
<el-button v-if="tableProps.isedit" type="primary" icon="el-icon-plus">修改</el-
button>
<div style="clear: both" />
</div>
<el-table
:data="dataListData"
class="use-table"
:max-height="tableProps.maxHeight ? tableProps.maxHeight : '340px'"
@cell-click="handleCell"
@row-click="handleRow"
>
<template v-for="(item, index) in tableProps.dataListParams">
// 序号栏 type=index 开启序号
<el-table-column
v-if="item.type"
:key="index"
:type="item.type"
:align="item.center"
:label="item.label"
:width="item.width ? item.width : 'auto'"
/>
// 数据栏 占位 是否开启插槽
<el-table-column
v-if="!item.type"
:key="index"
:align="item.center"
:prop="item.props"
:label="item.label"
:width="item.width ? item.width : 'auto'"
>
<template v-slot="{ row }">
// 不开启插槽 使用默认传入数据
<div v-if="!item.isSlot">{
{ row[item.props] }}</div>
// 作用域插槽 显示的按钮在父组件dom内部自定义视图
<div v-else><slot :name="item.props" :data="row" /></div>
</template>
</el-table-column>
</template>
</el-table>
// 数据分页
<div class="use-pagination">
<el-pagination
class="use-pagina