vue-sheet

A vis-vui-table component for Vue.js.

install

  npm install vue-sheet

Usage

import Vue from 'vue'
import {Sheet, Cell} from 'vue-Sheet'

Vue.use(Sheet)
vue.use(Cell)

or

import Vue from 'vue'
import { Sheet, Cell } from 'vue-Sheet'

Vue.component('Sheet', Sheet)
Vue.component('Cell', Cell)

Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 显示的数据 | array | — | — | | checkValue | 选择对应的值（没有这个属性，默认没有全选功能）属性。 | Array | - | - | | checkKey | 对应data哪个key的做为选择值。 | String | - | - |

column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 对应列的类型。 | string | string/link/button/box... | — | | header | 显示的标题 | string | — | — | | sources | 对应列内容的字段名, 或者组件对应的属性 | string/Object | — | — | | style | 对应列的样式 | object | — | — | | class | 对应列的class | string | — | — | |inline-template| 在标签内自定义元素 | — ||—|

type && sources

type 可以是默认提供的string/link/button/box 或者是自定义的组件，sources对应着其组件的属性值

sources中可以读取到data对应每个列上的值，通过在字符串前面添加"$"区分是字符串，还是data对应key下的值,如 :sources = '{text:$key}'

string

type = "string" 显示一个字符串，对应的 :sources = '{text:$key}',可以读取到data下的值，sources可以简写为 sources = '$key'

link

type = "link" 一个连接，:sources = '{text:$key, href: {...}}' href 的参数对应与v-link相同

button

type = "button" 一个按钮 :sources = '{text:$key, click:(itemData, index)=>{} }' click 为点击事件，对应的两个参数第一个是当前列的值，第二个是当前列的索引

other

除了提供的几个默认的type外，也可以在type写入中引入的组件的组件名，sources则是这个组件对应的属性值，基中会这个组件默认传入data属性，这个列对应的值

##example

<template>
  <div id="demo">
    <h1>Sheet</h1>
    <sheet class="table" :check-value = "checkValue" :records="students" class="sheet">
      <column header="Name" class="name" key="name"></column>
      <column header="Age" key="age"></column>
      <column header="option" type="link"  :option="{target: '_blank', text: '编辑', path: '/vis/normal/:id', params: {id: '$id'}, queries: {action: 'save'}}"></column>
      <column header="Name+Age" class="desc" inline-template :option="{click: hello}">
        <p>Name: {{ $value.name }}</p>
        <p>Age: {{ $value.age }}</p>
        <button @click="option.click($value.name)">Hello</button>
      </column>
    </sheet>
  </div>
</template>
<script>
import {Column, Sheet} from '../../packages/sheet'
export default {
  components: {
    Column,
    Sheet
  },
  data: function () {
    return {
      students: [
        {id: '339', name: 'hal', age: 30},
        {id: '730', name: 'jim', age: 10},
        {id: '731', name: 'green', age: 20},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
         {id: '882', name: 'jerry', age: 35},
          {id: '882', name: 'jerry', age: 35},
           {id: '882', name: 'jerry', age: 35},
            {id: '882', name: 'jerry', age: 35},
             {id: '882', name: 'jerry', age: 35},
              {id: '882', name: 'jerry', age: 35}
      ],
      checkValue: []
    }
  },
  methods: {
    hello (name) {
      window.alert('hello' + name)
    }
  }
}
</script>