elementui二次封装el-table带插槽
element-ui table组件的二次封装(插槽的形式)
1.外层table组件封装
2.内层table组件代码
elementui二次封装el-table带插槽子组件table封装 html部分
<template>
<div
v-loading="loading">
<el-table
ref="tableData"
:stripe="stripe"
:height="height"
:max-height="maxHeight"
header-row-class-name="table-list-header"
row-class-name="table-list-row"
:size="tableSize"
:data="data"
@selection-change="handleSelectionChange"
@current-change="handleTableCurrentChange"
@row-click="handleTableRowClick"
v-bind="otherConfig">
<template v-for="(p, index) in columns">
<!-- 选择框 -->
<el-table-column
v-if="p.selection"
type="selection"
width="p.width ? p.width : 50"
:fixed="p.fixed"
align="center"
:key="index"
></el-table-column>
<!-- 序号 -->
<el-table-column
v-else-if="p.type"
type="index"
width="p.width ? p.width : 80"
label="序号"
:index="p.indexMethod"
:key="index"
></el-table-column>
<!-- 多级表头 -->
<el-table-column
v-else-if="p.multi"
align="center"
:label="p.label"
:key="index"
>
<el-table-column
v-for="(child, childIndex) in p.children"
:key="childIndex"
v-bind="child"
>
</el-table-column>
</el-table-column>
<!-- 自定义内容 -->
<el-table-column
v-else-if="p.slot"
:label="p.label"
:key="index">
<slot
:name="p.slot"
:fixed="p.fixed"></slot>
</el-table-column>
<!-- 常规字段 -->
<el-table-column
v-else
:prop="p.prop"
:width="p.width"
:label="p.label"
:key="index"
></el-table-column>
</template>
</el-table>
<!-- eslint-disable -->
<el-pagination
v-if="isPaginationShow && pagination.total"
class="opagination mt12"
background
layout="sizes, prev, pager, next"
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="pagination.current"
:page-size="pagination.size"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
js部分
<script>
export default {
name: 'AppTable',
props: {
columns: {
type: Array,
default: () => []
},
data: {
type: Array,
default: () => []
},
pagination: {
type: Object,
default: () => ({})
},
isPaginationShow: {
type: Boolean,
default: true
},
tableSize: {
type: String,
default: 'small'
},
stripe: {
type: Boolean,
default: true
},
otherConfig: {
type: Object,
default: () => {}
},
loading: {
type: Boolean,
default: false
}
},
data () {
return {}
},
methods: {
// 切换页码
handleCurrentChange () {
this.$emit('getData')
},
// 切换每页条数
handleSizeChange (value) {
// current-page和 page-size都支持 .sync修饰符，用了.sync修饰符，就不需要手动给 this.pagination赋值了
this.pagination.size = value
this.$emit('getData')
},
// 切换选择
handleSelectionChange (val) {
this.$emit('changeSelection', val)
},
// 单选
handleTableCurrentChange (currentRow) {
this.$emit('changeCurrent', currentRow)
},
// 点击行
handleTableRowClick (currentRow) {
this.$emit('rowClick', currentRow)
}
},
watch: {
data () {
// 重新请求数据时 table滚动到顶部
this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0
}
}
}
</script>
在父组件中使用 html 代码
<template>
<div class="hello">
<app-table
:columns="columns"
:data="tableList"
:pagination="pagination"
@getData="fetchTableList"
:loading="loading"
>
<template slot="action"
slot-scope="scope">
<el-button
type="text"
@click="showDetail(scope.row)">查看详情</el-button>
</template>
</app-table>
</div>
</template>
js代码部分
<script>
// 引入子组件表单
import AppTable from '@/components/AppTable.vue'
export default {
name: 'HelloWorld',
components: { AppTable },
data () {
return {
loading: false,
columns: [
{ selection: true },
{ type: 'index' },
{prop: 'name', label: '名称', width: 160},
{ slot: 'action', label: '操作' }
],
tableList: [{}],
pagination: {
current: 1,
size: 10,
total: 100
}
}
},
methods: {
fetchTableList () {
// 分页时触发表单数据请求
console.log(this.pagination)
}
}
}
</script>
这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。
通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。
element-ui table组件的二次封装(插槽的形式)由于业务需求，对el-table组件进行了二次封装，封装分为两层，两个组件嵌套，也能够单独使用
篇幅原因简单的JS逻辑处理没有贴上来了
1.外层table组件封装<el-row :gutter="0">
<el-col :span="12">
<all-titlebox :msg="tableViewMsg" type="lable_b"></all-titlebox>
</el-col>
<el-col :span="12" class="all-t-r btn-box">
<el-button size="medium" v-if="showAddButton" @click="addData()"
>新建</el-button
>
<slot name="topOperation"></slot>
<all-dropdownsetting
v-if="showDropdownsetting"
:list="checkList"
:colums="showColums"
@checkedChange="checkedChange($event)"
></all-dropdownsetting>
</el-col>
</el-row>
<!-- 操作栏 start -->
<!-- 分割线 start -->
<el-row :gutter="0">
<el-col :span="24" class="all-m-t-10">
<div class="all-primary-line"></div>
</el-col>
</el-row>
<!-- 分割线 end -->
<el-row :gutter="0">
<el-col :span="24" class="table-main">
<itl-table ref="table" :colums="colums" :tableData="tableData" :operationData="operationData" v-bind="$attrs" v-on="$listeners">
<template v-if="$scopedSlots.operation" v-slot:operation="props">
<slot name="operation" v-bind="props"></slot>
</template>
<template v-for="item in colums" v-slot:[item.slot]="props">
<slot :name="item.slot" v-bind="props"></slot>
</template>
</itl-table>
</el-col>
</el-row>
核心代码是这一段，通过插槽的形式，显示需要特殊处理的字段
<template v-for="item in colums" v-slot:[item.slot]="props">
<slot :name="item.slot" v-bind="props"></slot>
</template>
外层组件table-view使用示例
<table-view
table-view-msg="合同模板管理"
ref="table-view"
:table-colums="tableColums"
:table-data="table"
add-router="/contract/contrac-template/template-edit"
:selection='true'
:showAllSelect="false"
@view="viewDetail($event)"
@edit="editData($event)"
@del="deleteData($event)"
@page-change="currentChange($event)"
@size-change="sizeChange($event)"
:total="total"
:filter-page-sizes="filterPageSizes"
>
<div slot="template-type" slot-scope="{ row }">
{{ getType(row.templateType) }}
</div>
<div slot="template-status" slot-scope="{ row }">
{{ getStatus(row.templateStatus) }}
</div>
<!--operation插槽使用示例子 -->
<!-- <div slot="operation" slot-scope="{ row }">
<el-button
type="text"
size="small"
>{{row.templateType}}</el-button
>
</div> -->
</table-view>
2.内层table组件代码
<!-- 基础表格组件 -->
<div class="ITL-table">
<el-row :gutter="0">
<el-col :span="24" class="all-m-t-20 table-main">
<!-- 表格区域 start -->
<el-table
ref="table"
:data="tableData"
:stripe="true"
tooltip-effect="light"
highlight-current-row
:header-cell-class-name="cellClass"
v-bind="$attrs"
v-on="$listeners"
@row-click="handleRowClick"
>
<el-table-column
type="selection"
:width="55"
v-if="selection"
/>
<el-table-column
type="index"
:width="serialNumber.width || 'auto'"
:label="serialNumber.label"
v-if="serialNumber.show"
/>
<el-table-column
v-for="item in colums"
:key="item.id"
:label="item.label"
:align="item.align || 'left'"
:width="item.width || 'auto'"
:min-width="item.minWidth ? item.minWidth : minWidth"
:fixed="item.fixed || false"
:show-overflow-tooltip="
item.tooltip === undefined ? tooltip : item.tooltip
"
:formatter="item.formatter"
:type="item.type"
>
<template slot-scope="{ row, $index }">
<span v-if="item.formatter">{{ item.formatter(row, dictList) }}</span>
<slot v-else-if="item.slot" :name="item.slot" :row="row" :index='$index' />
<span v-else>{{ row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column
v-if="Object.keys(operationData).length || $slots.operation || $scopedSlots.operation"
label="操作"
:width="operationWidth"
align="center"
:fixed="operationFixed"
>
<div class="operation-row" slot-scope="scope">
<el-button
size="small"
type="text"
v-if="operationData.edit && operationData.edit.show"
@click="edit(scope)"
>{{ operationData.edit.text || '编辑' }}</el-button
>
<el-button
type="text"
size="small"
v-if="operationData.view && operationData.view.show"
@click="view(scope)"
>{{ operationData.view.text || '查看' }}</el-button
>
<el-button
type="text"
size="small"
v-if="operationData.del && operationData.del.show"
@click="del(scope)"
>{{ operationData.del.text || '删除' }}</el-button
>
<slot name="operation" :row="scope.row" :index="scope.$index"></slot>
</div>
</el-table-column>
</el-table>
<!-- 表格区域 end -->
<!-- 分页区域 start -->
<div class="pagination all-t-r all-m-t-10" v-if="paginationShow">
<el-pagination
:current-page.sync="pagination.page"
:page-sizes="pageSizes"
:page-size.sync="pagination.rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="$currentChange($event)"
@size-change="$sizeChange($event)"
>
</el-pagination>
</div>
<!-- 分页区域 end -->
</el-col>
</el-row>
</div>
内层组件 itl-table使用示例
<itl-table ref="resumeTable" :paginationShow="false" @view="sendResume" :noHandleRowClick="true" :colums="colums" :tableData="resumeList" @selection-change="onSingleSelection" :showAllSelect="false" :operationData="operationData" :serialNumber="{show:false}" :selection="true">
<span slot="orgName" class="selectRow" slot-scope="scope" @click="getCompanyIntroduciton(scope.row.orgId)">
<span>{{ scope.row.orgName }}</span>
</span>
<span slot="postName" class="selectRow" slot-scope="scope" @click="announceClick(scope.row.id)">
<el-tooltip effect="light" placement="top">
<div slot="content" v-html="scope.row.qualification"></div>
<span>{{ scope.row.postName }}</span>
</el-tooltip>
</span>
</itl-table>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。