小型的表格插件

[reming0227]

Vue-Table-Form

小型的表格插件，喜欢的点个 star

Github 地址： https://github.com/reming0227/vue-table-form

📦 Installation

npm install vue-table-from --save
yarn add vue-table-from

🔨 Usage

<vue-table :data="list" :columns="columns" :select_event="event"></vue-table>

import VueTable from 'vue-table-from';
new Vue(
  data: {
    columns: [
    {
      title: 'Name',
      key: 'name'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Sex',
      key: 'sex'
    },
    {
      title: 'Contry',
      key: 'country'
    },
    {
      title: 'Authority',
      key: 'select',
      type: 'switch',
      event: function (state, row) {
        console.log(state, row);
      }
    }],
    list: [{
      name: 'Row',
      age: 'xxx',
      sex: 'Male',
      country: 'China',
      switch: {
        color: 'red',
        value: true
      }
    },
    {
      name: 'Row',
      age: 'xxx',
      sex: 'Male',
      country: 'China',
      switch: {
        color: 'purple',
        value: false
      }
    },
    {
      name: 'Row',
      age: 'xxx',
      sex: 'Male',
      country: 'China',
      switch: {
        color: 'yellow',
        value: false
      }
    },
    {
      name: 'Row',
      age: 'xxx',
      sex: 'Male',
      country: 'China',
      switch: {
        color: 'green',
        value: false
      }
    },
    {
      name: 'Row',
      age: 'xxx',
      sex: 'Male',
      country: 'China',
      switch: {
        color: '#108ee9',
        value: true
      }
    }]
  },
  components: {
    VueTable
  },
  methods: {
    event (selects) {
      console.log(selects);
    }
  }
})

🎬 Preview