vue?elementui二次封裝el-table帶插槽問題
更新時間：2022年08月15日 08:49:25 作者：Zzz_bk
這篇文章主要介紹了vue?elementui二次封裝el-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> ? ? ? ? <!-- 常規(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')
? ? },
? ? // 切換每頁條數
? ? 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 () {
? ? // 分頁時觸發(fā)表單數據請求
? ? console.log(this.pagination)
? ? }
? }
}
</script>這里基本的使用都可以滿足，里面包含表列的：自定義插槽；表格選擇器；表格序號以及多級表頭的渲染。
通用樣式一般根據定制的格式來寫，一般來說表格基本格式都是一樣的，也有可能會出現表格的表頭行高，表格的行高內容不一樣的情況，也可通過配置參數來處理。
element-ui table組件的二次封裝(插槽的形式)
由于業(yè)務需求，對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">
? ? ? ? ? <!-- 表格區(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>內層組件 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 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數據的流程,需要的可以參考下2023-12-12
這篇文章主要為大家介紹了簡易vuex4核心原理及實現源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關于Vue實現生成二維碼的簡單方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關于vue父子組件通信的高級用法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了如何在nvue頁面中使用webview組件,并詳細介紹了如何在h5項目中安裝和配置npmiy_uniwebview插件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
nuxt.js服務端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務端渲染中axios和proxy代理的配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中實現拖動調整左右兩側div的寬度的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個API，類型是一個函數，本文通過完整代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
這篇文章主要利用websocked 建立長連接，利用Vuex全局通信的特性，以及watch,computed函數監(jiān)聽消息變化，并驅動頁面變化實現實時聊天，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了Vue父子組件傳值的一些坑，幫助大家更好的理解和使用vue父子組件，感興趣的朋友可以了解下2020-09-09