elementui二次封装el-table带插槽
Zzz_bk 人气:0elementui二次封装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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容