vue-split-table【表格合併和編輯外掛】

大漠火狼發表於2018-10-26
Vue

vue-split-table應用的效果圖

vue-split-table【表格合併和編輯外掛】

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

1.核心原始碼分析

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

    8. 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>
複製程式碼

    參考文章:

    時鐘元件

相關文章