vue-split-table【表格合並和編輯插件】

前言

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

參數	說明	類型	是否必傳	Default
headData	表頭內容	Array	必傳	-
bodyData	表體內容	Array	必傳	-
checkFlag	是否有復選列	Boolean	可選	True
tableEditFlag	表格是否可編輯	Boolean	可選	True
operFlag	是否有操作列	Boolean	可選	True

3.暴露的Events

name	說明	參數
multipleData	當選項發生變化觸發	multipleData
editData	表格編輯文本框失焦觸發	editData

4.slot

事件名	說明
operate	配置操作列后就可通過設置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