vue-split-table

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

项目中使用请戳