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>

參考文章:

時鐘組件