vue-split-table

1.0.1 • Public • Published

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

项目中使用请戳

Package Sidebar

Install

npm i vue-split-table

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

394 kB

Total Files

11

Last publish

Collaborators

  • lanzhsh