現在有四個元件,如圖所示,呼叫的結構如圖所示

 為方便使用,在元件二中封裝的是一些公共插槽傳遞到元件三中進行解析,

但是不可能所有的頁面內容全部相同,所以不能將只在某個頁面中使用的插槽放到元件2中,

應該由元件一中的配置檔案來決定,通過跨元件插槽來解決這個問題

下面是程式碼

元件1:

        <template #status="scope">
          <el-button
            :type="scope.row.enable == 1 ? 'success' : 'danger'"
            size="small"
 

          >
            {{ scope.row.enable ? '啟用' : '禁用' }}
          </el-button>
        </template>

propList: [
　　{
  prop: 'enable',
  label: '狀態',
  minWidth: '100px',
  slotName: 'status'
　　}
]

元件2:

      <template
        v-for="item in otherPropSlots"
        :key="item.slot"
 

        #[item.slotName]="scope"
      >
        <slot v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </slot>
      </template>

元件3:

 <template v-for="propItem in propList" :key="propItem">
        <el-table-column 
 
align="center" v-bind="propItem" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>