vue-vertical-table

Install

npm i vue-vertical-table

Use

import VerticalTable from 'vue-vertical-table'
import 'vue-vertical-table/lib/vertical-table.css'

<VerticalTable v-model="data" :table-data="vTableData" :table-style="tableStyle" />
<CrossTable v-model="data" :table-data="crossTableData" :table-style="tableStyle" />

tableData

vTableData: [
  {
    name: 'row1',
    children: [
      { isEdit: false, key: 'Order No.', value: '1001' },
      { isEdit: true, type: 'input', key: 'Product Name', value: 'Basketball' },
      { isEdit: true, type: 'checkbox', key: 'Checked', value: false }
    ]
  },
  ...
]
crossTableData: [
  {
    title: 'John',
    children: [
      { name: 'love me?', value: false, isEdit: true, type: 'checkbox' },
      { name: 'Gender', value: 'M', isEdit: true, type: 'input' },
      { name: 'Age', value: '18', isEdit: true, type: 'input' },
      { name: 'Height', value: '200', isEdit: true, type: 'input' },
      { name: 'Weight', value: '60', isEdit: true, type: 'input' }
    ]
  },
  {
    title: 'Amy',
    children: [
      { name: 'love me?', value: true, isEdit: true, type: 'checkbox' },
      { name: 'Gender', value: 'F', isEdit: true, type: 'input' },
      { name: 'Age', value: '22', isEdit: true, type: 'input' },
      { name: 'Height', value: '160', isEdit: true, type: 'input'},
      { name: 'Weight', value: '45', isEdit: true, type: 'input' }
    ]
  },
  ...
]

Input

| prop | type | value | | ------ | -------- | ----- | | isEdit | boolean | - | | type | String | input | | key | String | - | | value | String | - |

Checkbox

| prop | type | value | | ------ | -------- | ----- | | isEdit | boolean | - | | type | String | checkbox | | key | String | - | | value | boolean | - |

Demo

Click here

License

MIT

Copyright (c) 2019-present ysya