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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
查看更多关于vue elementui二次封装el-table带插槽问题的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122192