開發十年，就只剩下這套架構體系了！ >>>   

為了少用element UI 元件，自己改的方便，所以自己倒騰。。。

要封裝Table必須要解決不同業務情況下的資料繫結，而處理這個就要先搞定 slot 這個佔位符

整個過程如下，註釋都在程式碼裡，

slot 測試外掛部分

<template>
  <div class="mydiv">
    <h3>test-slot</h3>
    <!-- 父元件裡的span會替換掉slot所以這裡的123是看不見的 -->
    <!-- 如果父元件在使用子元件testSlot的時候不在裡面加內容則這裡的slot會顯示出來 -->
    <!-- <slot>123</slot> -->
    <p>=================================</p>
    <!-- <h3>站位指定名稱放入</h3> -->
    <div class="noneSlot">
      <slot></slot>
    </div>
    <div class="test-two">
      <slot name="two"></slot>
    </div>
    <div class="test-one">
      <slot name="one"></slot>
    </div>
    <p>=================================</p>

    <table class="pre_tab">
      <tbody>
        <slot name="tab_title"></slot>
        <slot name="tab_tr" v-for="data_tr in data_tab" :item="data_tr"></slot>
      </tbody>
    </table>
  </div>
</template> 
 
<script>
export default { 
  name:"test_slot",
  data(){
    return {
      data_tab: [],
    }
  },
  props:{
    pre_data_tab:Array,
  },
  watch:{
    pre_data_tab(val){
      this.data_tab=val;
      console.log(this.data_tab);
    }
  },
  methods:{
    lookdata:function(td){            

    }
  }
}
</script>

<style scoped>
.mydiv {
  width: 100%;
  text-align: center;
}
.pre_tab {
  width: 100%;
  text-align: center;
  background-color: yellowgreen;
}
</style>
 

呼叫部分

<template>
  <div id="app">
    <test-slot :pre_data_tab="data">
      <!-- <span>我是父元件裡的文字，但是我要被放到子元件裡</span> -->

      <!-- slot=one這個div會替換掉子元件裡name="one"的slot標籤 -->
      <div slot="one">
        <span>one</span>
        <span>第一個</span>
      </div>
      <!-- 這個div沒有用slot指定名字所以會替換掉子元件裡沒有name屬性的slot標籤 -->
      <div>
        <span>此div沒有slot ,slot如果沒有名稱,則會多次放入</span>
      </div>
      <!-- slot=two這個div會替換掉子元件裡name="two"的slot標籤 -->
      <div slot="two">
        <span>two</span>
        <span>第二個</span>
      </div>
      <!-- 設定標題  -->
      <template slot="tab_title">
        <tr>
          <th>ID</th>
          <th>名稱</th>
          <th>地址</th>
        </tr>
      </template>
      <!-- user 相當於一個wrapper,容器 -->
      <!-- user.item 對應 子元件的  :item="data_tr" 這裡 item -->
      <!-- table可以封裝到 表格,資料載入,重新整理,分頁 只需要傳入URL就可以了 具體的增刪改業務 單獨完成 -->
      <template slot="tab_tr" slot-scope="user">
        <tr>
          <td>{{ user.item.id }}</td>
          <td class="td_name">{{ user.item.name }}</td>
          <td>{{ user.item.addr }}</td>
          <td><button @click="fun_add(user.item)">增加</button></td>
        </tr>
      </template>
    </test-slot>

    <button @click="loaddata">載入資料</button>
  </div>
</template> 

<script>
export default {
  data(){
    return {
      data:[]      
    }
  },
  components:{    
    "test-slot": () => import("./children/testSlot")
  },
  created:function(){
    this.loaddata();
  },
  methods:{
    loaddata:function(){
      this.data=[
        {id:"1",name:"tom",addr:"usa"},
        {id:"2",name:"小明",addr:"陝西"},
        {id:"3",name:"小花",addr:"山西"}
      ];      
      console.log('模擬初始化資料完畢');
    },
    fun_add:function(item){
      console.log(item.id+' '+item.name+' '+item.addr);      
    }
  }
}
</script>

<style>
.my_title {
  background-color: aqua;
  margin-right: 20px;
  text-align: center;
  font-size: 16px;
}

.td_name {
  color: red;
  font-size: 20px;
}
</style>
 

執行結果和過程。

相關推薦