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

知道了slot 怎麼用，才可以理解table這樣封裝的原因

table外掛部分

<template>
  <div>
    <!-- 關鍵字部分 -->
    <div class="pre_search" v-show="show_key">
      <label>關鍵字：</label>
      <input type="text" placeholder="請輸入關鍵字" v-model="key_word" />
    </div>
    <!-- table部分 -->
    <div class="pre_tab">
      <table class="pre_dataintable">
        <thead>
          <slot name="tab_title"></slot>
        </thead>
        <tbody>
          <slot
            name="tab_tr"
            v-for="data_tr in data_tab"
            :item="data_tr"
          ></slot>
        </tbody>
        <tbody>
          <slot v-if="show_add" name="tab_add"></slot>
          <slot v-if="show_upd" name="tab_upd"></slot>
        </tbody>
      </table>
    </div>
    <!-- 分頁部分 -->
    <div class="pre_page" v-show="show_page">
      <ul style="text-align: right; margin-right: 20px;">
        <li>
          當前頁：<label>{{ nowpage }}</label
          >&nbsp; 合計頁：<label>{{ maxpage }}</label
          >&nbsp;&nbsp; <a href="#" @click="firstpage">首頁</a>|
          <a href="#" @click="beforepage">上一頁</a>|
          <a href="#" @click="nextpage">下一頁</a>|
          <a href="#" @click="lastpage">尾頁</a>
          <input type="text" v-model="jumppage" value="" /><a
            href="#"
            @click="gopage"
            class="go"
            >Go</a
          >
        </li>
      </ul>
    </div>
    <!-- 元件引入部分 彈窗元件和等待元件 -->
    <div>
      <per-message ref="msg_back" :message_data="msg_obj" />
      <pre-loading :pre_show_loading="fullloading" />
    </div>
  </div>
</template>
<script >
/*
名稱：Table元件
日期：2019-03-21
作者：hj
目標：1、傳入一組資料,自動構建標題和內容=>兩個陣列  1個數組是標題  1個數組是內容  方便構造 
     2、所有的增、刪、改、查、均在元件內容完成。
     3、還可以分頁

分析：1、增、刪、改、查 呼叫api主動配置。=>容易
     2、標題主動配置。=>容易
     3、每一列的校驗方式 =>配置  
     4、資料繫結？通過 solo 佔位符實現

*/

export default {  
  name: "pre_select_one",
  components: {    
    'per-message':()=>import("./pre_message.vue"),
    'pre-loading':()=>import("./pre_loading.vue")
  },  
  data() {
    return {
      data_tab: [],
      show_key:true,
      key_word:'',
      show_page:true,
      maxpage:'',
      nowpage:'',
      jumppage:'',
      msg_obj:{},
      fullloading:false,
      show_add:false,
      show_upd:false
    };
  },
  props: {
    api_url:String,
    pre_post:String,
    pre_post_add:{ type:String,default:'' },
    pre_post_del:{ type:String,default:'' },
    pre_post_upd:{ type:String,default:'' },
  },
  created:function(){
      this.nowpage=1;
  },
  watch:{
    pre_post(val){
      this.loaddata();
    },
    pre_post_add(val){
      if(String(val)!='')
        this.data_add();
    },
    pre_post_del(val){
      if(String(val)!='')
        this.data_del();
    },
    pre_post_upd(val){
      if(String(val)!='')
        this.data_upd();
    }
  },
  mounted() {
    this.initTable();
    this.loaddata();
  },
  methods: {
    initTable:function(){
      if(Number(this.maxpage)==0){
        this.show_page=false;
      }else{
        this.show_page=true;
      }
    },
    firstpage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage=1;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已經是第一頁'};
        }
    },
    beforepage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage--;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已經是第一頁'};
        }
    },
    nextpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage++;
            this.refresh_data();
        }else{            
            this.msg_obj={'showtype':'warning','note':'已經是最後一頁'};
        }
    },
    lastpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage=this.maxpage;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已經是最後一頁'};
        }
    },
    gopage:function(){
        console.log('跳轉到='+this.jumppage);
        if(Number(this.jumppage)>0 && Number(this.jumppage)<=Number(this.maxpage)){
            this.nowpage=this.jumppage;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'跳轉頁數不在規定範圍內,請檢查'+this.jumppage};
        }
    },
    loaddata:function() {
      // console.log(this.api_url);
      // console.log(this.pre_post);      
      this.fullloading=true;
      this.$post(
        this.api_url,
        this.pre_post,
      ).then(res => {
        this.fullloading=false;
        this.show_add=false;
        this.show_upd=false;

        try {         
          res=JSON.parse(res); 
          // console.log(res.data);         
          if (res.data.status == 1) {
            this.maxpage=res.data.allpage;
            this.data_tab=res.data.data;
          } else {
            this.msg_obj={'showtype':'warning','note':res.msg};
          }
          this.initTable();
        } catch (ex) {
          this.msg_obj={'showtype':'warning','note':"查詢失敗"+ex};
        }
      });
    },
    data_add:function(){
      // 只是 Postjson 和 提示結果不一樣 其他一樣。沒有必要重新定義方法,所以只控制展示
      this.show_add=true;
      this.show_upd=false;
    },
    data_upd:function(){
      this.show_add=false;
      this.show_upd=true;
    },
    refresh_data() {
      console.log('重新整理');
      this.$emit("tab-event", this.nowpage,this.key_word);
    }
  }
};
</script>
 
<style scoped >
/* pre_search */
.pre_search {
  text-align: left;
}
.pre_search > label {
  position: relative;
  left: 2%;
}
.pre_search > input {
  position: relative;
  left: 2%;
}
.pre_search > input :focus {
  border: 1px solid #024aee;
  background-color: #aaa;
}

/* table 整體樣式 */
.pre_dataintable {
  margin-top: 15px;
  border-collapse: collapse;
  border: 1px solid #aaa;
  width: 95%;
  /* padding 沒有作用 */
  /* padding: 0px 5px 10px 5px; */
  position: relative;
  left: 2%;
}
.pre_dataintable th {
  vertical-align: baseline;
  padding: 5px 15px 5px 6px;
  background-color: #c1ffc1;
  border: 1px solid #3f3f3f;
  text-align: center;
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
}
.pre_dataintable td {
  /* vertical-align: text-top; */
  padding: 5px 8px 5px 8px;
  border: 1px solid #aaa;
  text-align: left;
}
/* 表格內按鈕 */
.pre_dataintable td button {
  width: 80px;
  padding: 6px 6px 6px 6px;
  border: 1px solid #aaa;
  text-align: center;
  display: inline-block;
}
/* 表格內輸入框 */
.pre_dataintable td input {
  width: 100%;
  height: 100%;
  border: 0px;
  text-align: left;
  padding: 2px 2px 2px 2px;
  /* font-size: 16px; */
}

.pre_dataintable tr {
  cursor: pointer;
}
.pre_dataintable tr:nth-child(odd) {
  background-color: #f5f5f5;
}
.pre_dataintable tr:nth-child(even) {
  background-color: #fff;
}
.pre_dataintable tr:hover {
  background-color: #e2fde2;
}

.tab_add {
  width: 95%;
  display: flex;
  margin-top: 5px;
  margin-left: 2%;
  background-color: rgba(103, 233, 77, 0.644);
}
.tab_upd {
  width: 95%;
  display: flex;
  margin-left: 2%;
  background-color: rgba(209, 212, 36, 0.644);
}

/* 翻頁樣式 */
.pre_page {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.pre_page > ul {
  text-align: right;
  list-style: none;
}
.pre_page > ul > li > a {
  text-decoration: none;
}
.pre_page > ul > li > .go {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: 1px solid #cccccc;
  background: #024aee;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  margin-left: 5px;
}
.pre_page > ul > li > a:hover {
  color: #394656;
}
</style>
 

呼叫部分

<template>
  <div class="mydiv">
    <h2>Table外掛測試</h2>
    <pre-table ref="file_table" @tab-event="refresh_data" :api_url="load_url" :pre_post="load_json">
      <!-- 設定標題  -->
      <template slot="tab_title">
        <tr>
          <th style="display:none;">ID</th>
          <th>上傳使用者</th>
          <th>檔名稱</th>
          <th>檔案型別</th>
          <th>檔案大小</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 style="display:none;">{{ user.item.id }}</td>
          <td class="td_name">{{ user.item.username }}</td>
          <td>{{ user.item.upfile_name }}</td>
          <td class="td_type">{{ user.item.upfile_type }}</td>
          <td>{{ user.item.upfile_size }}</td>
          <td>{{ user.item.sys_date }}</td>
          <td style="text-align: center;">
            <button @click="fun_add()">增加</button>&nbsp;
            <button @click="fun_del(user.item.id)">刪除</button>&nbsp;
            <button @click="fun_upd(user.item.id)">修改</button>
          </td>
        </tr>
      </template>
      <!-- 構建新增模板 -->
      <template slot="tab_add">
        <!-- <h2>名稱：</h2>
        <input type="text" v-model="upd_upfile_name" />
        <button @click="fun_save('add')">儲存新增</button>-->
        <tr>
          <td style="display:none;"></td>
          <td>
            <input type="text" v-model="t_username">
          </td>
          <td>
            <input type="text" v-model="t_name">
          </td>
          <td>
            <input type="text" v-model="t_type">
          </td>
          <td>
            <input type="text" v-model="t_size">
          </td>
          <td></td>
          <td style="text-align: center">
            <button @click="fun_save('add')">儲存新增</button>
          </td>
        </tr>
      </template>
      <!-- 構建修改模板 -->
      <template slot="tab_upd">
        <tr>
          <td style="display:none;"></td>
          <td>
            <input type="text" v-model="t_username">
          </td>
          <td>
            <input type="text" v-model="t_name">
          </td>
          <td>
            <input type="text" v-model="t_type">
          </td>
          <td>
            <input type="text" v-model="t_size">
          </td>
          <td></td>
          <td style="text-align: center">
            <button @click="fun_save('upd')">儲存修改</button>
          </td>
        </tr>
      </template>
    </pre-table>
  </div>
</template>

<script>
import { GetShort, BackSpecial } from "@/utils/localstore.js";
// 這個是把postjson資料過程封裝起來
import { tab_file_select } from "@/utils/loadhttpdata.js";

export default {
  components: {
    "pre-table": () => import("./personmode/pre_table.vue")
  },
  data() {
    return {
      load_url: "",
      load_json: "",
      upd_upfile_name: "",
      t_username: "",
      t_name: "",
      t_type: "",
      t_size: ""
    };
  },
  created: function() {
    this.loaddata();
  },
  methods: {
    loaddata: function() {
      this.load_url = "/Data_Back";
      this.load_json = tab_file_select("", "1");
    },
    refresh_data: function(page, keyword) {
      console.log("重新整理結果page=" + page + " keyword=" + keyword);
      this.load_url = "/Data_Back";
      this.load_json = tab_file_select(keyword, page);
    },
    fun_add: function() {
      // 展示新增位置
      this.$refs.file_table.data_add();
    },
    fun_del: function(id) {
      console.log("刪除 id=" + id);
    },
    fun_upd: function(id) {
      // 展示修改位置
      this.$refs.file_table.data_upd();
    },
    fun_save: function(type) {
      console.log("操作：" + type + " 內容" + this.upd_upfile_name);
    }
  }
};
</script>
<style scoped>
.td_type {
  width: 200px;
  height: 20px;
  /* white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word; */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

 

執行結果

相關推薦