Vue 中的 slot

首先 slot 是插槽的意思，在vue中也是充當一個預留插槽位置的意思。

（嗐，上個星期封裝的元件寫的太菜，被隊友重構了，程式設計師路漫漫啊~）

簡單寫一個簡單的table元件，使用slot 預留插槽。

這裡使用的是element-ui 的el-table,table元件

<template>
<div>
  <el-table ref="table" 
    :tableData="tableData.list" 
    :height="height" 
    :stripe="stripe" 
     :border="border" 
    :height-current-row="hcr" 
    :loading="isLoading"  
    :show-summary="showSummary"
     @current-change="changeCurrent" 
    @sort-change="sortChange" 
    @selection-change="selectChange">
      <!--預留插槽-->
        <slot></slot>
      <!--table資料為空時顯示-->
        <div v-show="!noEmpty" slot="empty" class="empty">
           <template v-if="!init">
             <p>暫無資料</p>
           </template>
        </div>   
  </el-table>
    <el-pagination
      ref="pagination"
      background
      layout="prev, pager, next"
      :current-page="tableData.page"
      :total="tableData.total"
      @current-change="pageChange">

    </el-pagination>
</div>
</template>
<script>
    export default {
     props:{
       tableData: Object,
       height:{
        type:[Number, String],
        default:null
       },
        border: {type:Boolean, default: false},
        noEmpty: {type:Boolean, default: false},
        showSummary: {type: Boolean, default: false},
        stripe: {type:Boolean, default: true},
        isLoading: {type: Boolean, defalut: false},
     },
     data(){
        return{
            init: true
        }
    },
watch:{
    isLoading: function(val, oldval){
     if(val == true) return;
     this.init = false
    }
},
    method: {
      changeCurrent(){},
      sortChange(){},
      selectChange(){},
      pageChange(){}
    }
    }
</script>

元件的使用：<xy-table>中間的 <el-table-column>部分都是替代上面元件的 <slot></slot>位置的

    <xy-table 
        :tableData="unBindList" 
        :loading="unBindList.isLoading"
        @change="getNoPortal">
        <el-table-column prop="name" label="標題" align="center"></el-table-column>
        <el-table-column prop="channelId" label="直播間ID" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scoped">
            <el-button type="text" @click="bindSession(scoped.row)">繫結</el-button>
          </template>
        </el-table-column>
      </xy-table>