Vue-Table-Form

Mobile side UI-library base on Vue.js

📦 Installation

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

🔨 Usage

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

import 'vue-table-form/lib/style.css';
import VueTable from 'vue-table-form';
new Vue(
  data: {
    columns: [
    {
      title: 'Name',
      key: 'name'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Sex',
      key: 'sex'
    },
    {
      title: 'Country',
      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

📃 License

MIT

Copyright (c) 2019-present, Reming