vue3使用element-plus再次封裝table組件的基本步驟

更新時(shí)間：2024年03月22日 10:14:04 作者：Software攻城獅

這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

vue3 使用element-plus 如何再次封裝table組件

基本步驟

創(chuàng)建子組件
默認(rèn)數(shù)據(jù)配置
在需要使用自定義 Table 組件的地方引入并使用：

創(chuàng)建子組件：

創(chuàng)建一個(gè)新的 .vue 文件，例如子組件 baseTable.vue，作為你封裝后的 Table 組件。

 <template>
    <div class="base-table-wrapper">
        <el-table :data="tableData" style="width: 100%">
            <template v-for="item in column" :key="item.prop">
                <el-table-column :prop="item.prop" :label="item.label" :width="item.width">
                    <template #default="scope" v-if="!!item.isScope">
                        <slot :name="item.prop+'ScopeContent'" :row="scope.row" />
                    </template> 
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script setup>

const props = defineProps({
    column: {
        type: Array,
        default() {
            return []
        }
    },
    tableData: {
        type: Array,
        default() {
            return []
        }
    },
})

</script>

<style lang="scss" scoped></style>

在需要使用自定義 Table 組件的地方引入并使用：

<template>
<base-table :column="tableColumn" :tableData="recordList"> 
    <!-- 刷卡時(shí)間自定義內(nèi)容 -->
    <template #createTimeScopeContent="slotProps" > 
        <span>{{ parseTime(slotProps.row.eventTime) }}</span>
    </template> 
    <!-- // 刷卡時(shí)間自定義內(nèi)容 -->

    <!-- 事件自定義內(nèi)容 -->
    <template #typeScopeContent="slotProps" >  
        <dict-tag :options="entrance_type" :value="slotProps.row.event" />
    </template>
    <!-- // 事件自定義內(nèi)容 --> 


    <!-- 部門自定義內(nèi)容 -->
    <template #deptNameScopeContent="slotProps" >  
        <span>{{ slotProps.row.deptName || "無(wú)" }}</span> 
    </template>
    <!-- // 部門自定義內(nèi)容 -->  

    <!-- 刷卡地點(diǎn)自定義內(nèi)容 -->
    <template #controllerNameScopeContent="slotProps" > 
        <dict-tag :options="controller_name" :value="slotProps.row.controllerName" />
    </template>
    <!-- // 刷卡地點(diǎn)自定義內(nèi)容 --> 
</base-table> 
</template>

<script setup>
const tableColumn = ref([
   {
      label: "刷卡時(shí)間",
      prop: "createTime",
      width: "180",
      align: "center",
      isScope: true
   }, {
      label: "事件",
      prop: "type",
      width: "auto",
      align: "center",
      isScope: true
   }, {
      label: "姓名",
      prop: "staffName",
      width: "auto",
      align: "center"
   }, {
      label: "卡號(hào)",
      prop: "cardNo",
      width: "auto",
      align: "center"
   }, {
      label: "部門",
      prop: "deptName",
      width: "auto",
      align: "center",
      isScope: true
   }, {
      label: "刷卡地點(diǎn)",
      prop: "controllerName",
      width: "auto",
      align: "center",
      isScope: true
   }
])
</script>

在 Vue 3 中，你可能會(huì)遇到“具名插槽”（Named Slots）的概念，它允許你在組件內(nèi)部定義特定的插槽位置，并在父組件中為這些具名插槽提供內(nèi)容。

以下是如何在Vue 3中使用具名插槽的一個(gè)基本示例：

首先，在子組件（ChildComponent.vue）中定義一個(gè)具名插槽：

<template>
  <div>
    <h2>這是子組件的標(biāo)題</h2>
    <slot name="description">默認(rèn)描述內(nèi)容</slot>
    <slot name="footer">默認(rèn)頁(yè)腳內(nèi)容</slot>
  </div>
</template>

在這個(gè)例子中，我們定義了兩個(gè)具名插槽：description 和 footer，并且都提供了默認(rèn)內(nèi)容。

然后，在父組件中使用這個(gè)子組件并填充具名插槽：

<template>
  <ChildComponent>
    <template v-slot:description>
      <p>這是來自父組件的描述內(nèi)容</p>
    </template>
    
    <template v-slot:footer>
      <p>這是來自父組件的頁(yè)腳內(nèi)容</p>
    </template>
  </ChildComponent>
</template>

在父組件中，我們使用 v-slot 指令（也可以簡(jiǎn)寫為 #）來指定要填充哪個(gè)具名插槽，并在其中提供相應(yīng)的內(nèi)容。這樣，當(dāng)渲染子組件時(shí)，就會(huì)在對(duì)應(yīng)的位置插入這些內(nèi)容。

vue3 使用具名插槽并且傳遞值

在 Vue 3 中，具名插槽不僅可以用于傳遞 HTML 結(jié)構(gòu)，還可以配合作用域插槽（Scoped Slots）來傳遞數(shù)據(jù)。作用域插槽允許子組件向其插槽內(nèi)傳遞數(shù)據(jù)，而父組件則可以通過插槽提供的回調(diào)函數(shù)來訪問這些數(shù)據(jù)并在插槽內(nèi)進(jìn)行渲染。

下面是一個(gè)使用 Vue 3 中具名插槽結(jié)合作用域插槽傳遞值的例子：

子組件 (ChildComponent.vue):

<template>
  <div>
    <h2>這是子組件的數(shù)據(jù)列表</h2>
    <!-- 定義作用域插槽，傳入一個(gè)數(shù)組 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item" name="listItem"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '第一條數(shù)據(jù)' },
        { id: 2, text: '第二條數(shù)據(jù)' },
        // ...
      ]
    }
  }
}
</script>

父組件:

<template>
  <ChildComponent>
    <!-- 使用 v-slot 指令接收子組件傳遞的 item 數(shù)據(jù) -->
    <template #listItem="slotProps">
      <div>
        <p>ID: {{ slotProps.item.id }}</p>
        <p>內(nèi)容: {{ slotProps.item.text }}</p>
        <!-- 這里可以根據(jù) item 數(shù)據(jù)自定義渲染內(nèi)容 -->
      </div>
    </template>
  </ChildComponent>
</template>

在上述例子中，子組件 ChildComponent 定義了一個(gè)具名插槽 listItem 并且每個(gè)插槽都綁定了一個(gè) item 數(shù)據(jù)。

在父組件中，我們通過 v-slot:listItem=“slotProps” 來接收這些數(shù)據(jù)，并通過 slotProps.item 訪問具體的 item 對(duì)象屬性。這樣父組件就可以根據(jù)傳遞過來的數(shù)據(jù)自行決定如何渲染每一項(xiàng)列表內(nèi)容了。

以上就是vue3使用element-plus再次封裝table組件的基本步驟的詳細(xì)內(nèi)容，更多關(guān)于vue3 element-plus再次封裝table的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: