vue split table component

Install

npm install vue-split-table 

Attributes

| 参数 | 说明 | 类型 | 是否必传 | Default | |-|-|-|-|-| | headData | 表头内容 | Array | 必传 | - | | bodyData | 表体内容 | Array | 必传 | - | | checkFlag | 是否有复选列 | Boolean | 可选 | True | | tableEditFlag | 表格是否可编辑 | Boolean | 可选 | True | | operFlag | 是否有操作列 | Boolean | 可选 | True |

Events

| name | 说明 | 参数 | |-|-|-| | multipleData | 当选项发生变化触发 | multipleData | | editData | 表格编辑文本框失焦触发 | editData |

Slot

| 事件名 | 说明 | |-|-|-| | operate | 配置操作列后就可通过设置slot来配置操作的内容 |

Example

<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>

project

项目中使用请戳