前言

vue-split-table應用的效果圖

vue-split-table開源地址,歡迎star,現在已經開源和同步到npm上
輕鬆搞定表格拆分或者合併,編輯,再也不怕被產品懟啦

1.核心原始碼分析

1. <td>裡面巢狀<table>實現表格拆分;
2. 原生實現複選框的單選和全選功能;
3. props屬性像父元件暴露屬性值;
4. $emit自定義事件方法向父元件傳值;
5. 作用域插槽<template slot-scope>由父向子傳入html標籤;
6. 巢狀<input>實現表格編輯,v-for不允許<input>裡面使用v-model改變item值問題解決;
7. webpack打包配置

vue-split-table開源地址,歡迎star和pr

2.暴露的Attributes

3.暴露的Events

4.slot

5.擼起示例程式碼

基於vue工程
<template>
  <split-table :headData="headData" :bodyData="bodyData" @multipleData="multipleData" @editData="editData">
    <template slot="operate" slot-scope="props">
      <span @click="splitEdit(props.rowData)">修改</span>
      <span @click="splitAdd(props.rowData)">新增</span>
      <span @click="splitDel(props.rowData)">刪除</span>
    </template>
  </split-table>
</template>

<script>
  import SplitTable from 'vue-split-table';
  export default {
    components: { SplitTable },
    data () {
      return {
         headData: ["城市", "美食", "好玩的地方"],
      bodyData: [
        { city: "北京", food: "北京烤鴨", fun: ["故宮", "頤和園", "長城"] },
        {
          city: "深圳",food: ["腸粉", "牛肉火鍋"],fun: ["西衝", "華僑城", "世界之窗"]
        },
        {
          city: ["重慶", "成都", "武漢"],
          food: ["重慶老火鍋","重慶烤魚","重慶小面","成都小吃","武漢熱乾麵"],
          fun: ["洪崖洞", "峨眉山", "黃鶴樓"]
        }
      ], 
      }
    },
    methods: {
    splitEdit(rowData) {
      console.log("rowData值為", rowData);
    },

    editData(data) {
      console.log("編輯所在行的值為", data);
    }

    splitAdd(data) {
      console.log("新增所在行的值為", data);
    },

    splitDel(data) {
      console.log("刪除所在行的值為", data);
    },

    multipleData(data) {
      console.log("複選框選擇的值為", data);
    }
    }
  }
</script>

參考文章:

時鐘元件

來源：https://segmentfault.com/a/1190000016769754