vue?elementui二次封裝el-table帶插槽問題

更新時(shí)間：2022年08月15日 08:49:25 作者：Zzz_bk

這篇文章主要介紹了vue?elementui二次封裝el-table帶插槽問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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>
? ? ? ? <!-- 自定義內(nèi)容 -->
? ? ? ? <el-table-column
? ? ? ? ?v-else-if="p.slot"
? ? ? ? ?:label="p.label"
? ? ? ? ?:key="index">
? ? ? ? <slot
? ? ? ? ? :name="p.slot"
? ? ? ? ? :fixed="p.fixed"></slot>
? ? ? ? </el-table-column>
? ? ? ? <!-- 常規(guī)字段 -->
? ? ? ? <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')
? ? },
? ? // 切換每頁條數(shù)
? ? 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)
? ? },
? ? // 點(diǎn)擊行
? ? handleTableRowClick (currentRow) {
? ? ? this.$emit('rowClick', currentRow)
? ? }
? },
? watch: {
? ? data () {
? ? ? // 重新請求數(shù)據(jù)時(shí) 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 () {
? ? // 分頁時(shí)觸發(fā)表單數(shù)據(jù)請求
? ? console.log(this.pagination)
? ? }
? }
}
</script>

這里基本的使用都可以滿足，里面包含表列的：自定義插槽；表格選擇器；表格序號以及多級表頭的渲染。

通用樣式一般根據(jù)定制的格式來寫，一般來說表格基本格式都是一樣的，也有可能會出現(xiàn)表格的表頭行高，表格的行高內(nèi)容不一樣的情況，也可通過配置參數(shù)來處理。

element-ui table組件的二次封裝(插槽的形式)

由于業(yè)務(wù)需求，對el-table組件進(jìn)行了二次封裝，封裝分為兩層，兩個組件嵌套，也能夠單獨(dú)使用

篇幅原因簡單的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.內(nèi)層table組件代碼

<!-- 基礎(chǔ)表格組件 -->
? ? <div class="ITL-table">
? ? ? <el-row :gutter="0">
? ? ? ? <el-col :span="24" class="all-m-t-20 table-main">
? ? ? ? ? <!-- 表格區(qū)域 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>
? ? ? ? ? <!-- 表格區(qū)域 end -->
? ? ? ? ? <!-- 分頁區(qū)域 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>
? ? ? ? ? <!-- 分頁區(qū)域 end -->
? ? ? ? </el-col>
? ? ? </el-row>
? ? </div>

內(nèi)層組件 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>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: