vue-sheet

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

install

  npm install vue-sheet

Usage

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

Vue.use(Sheet)
vue.use(Column)

or

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

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

Table Attributes

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

Cell Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 对应列的类型。 | string | string/link/button/box... | — | | header | 显示的标题 | string | — | — | | key | 对应列内容的字段名 | string | — | — | | style | 对应列的样式 | object | — | — | | class | 对应列的class | string | — | — | | inline-template | 标记为自定义标签，可以在标签内写任意的其它标签 | - | — | — | | option | 传入设置参数,当标签属性中有inline-template，可以为标签内的无素传递外部的属性，通过"option.***" 引用 | object | — | — |

type

type 可以是默认提供的string/link/button

string

type = "string" 显示一个字符串，对应的 key="***",可以读取到data下的值

link

type = "link" 一个连接，:option = '{target: '_blank', text: '编辑', path: '/vis/normal/:id', params: {id: '$id'}, queries: {action: 'save'}}' href 的参数对应与v-link相同

inline-template

inline-template 标记为自定义标签，可以在标签内写任意的其它标签，在标签内可以通过$value,来读取行数据

##example

<template>
  <div id="demo">
    <h1>Sheet</h1>
    <p>
      <label v-for="d in display">
        <input
          type="checkbox"
          name="display-chosen"
          :value="d.value"
          v-model="chosen">
        {{ d.text }}
      </label>
      <br>
    </p>
    <sheet class="table sheet" :check-value = "checkValue" :records="students" :hide-column-keys="hideKeys">
      <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/index.js'
export default {
  components: {
    Column,
    Sheet
  },
  data: function () {
    return {
      display: [{
        text: 'name',
        value: 'name'
      }, {
        text: 'age',
        value: 'age'
      }],
      chosen: ['name', 'age'],
      students: [
        {id: '339', name: 'hal', age: 30},
        {id: '730', name: 'jim', age: 10},
        {id: '731', name: 'green', age: 20}
      ],
      checkValue: []
    }
  },
  computed: {
    hideKeys () {
      let chosen = this.chosen
      let display = this.display

      return display.filter(d => {
        return chosen.indexOf( d.value ) === -1
      }).map(d => d.value)
    }
  },
  methods: {
    hello (name) {
      window.alert('hello' + name)
    }
  }
}
</script>