1.0.8 • Published 7 years ago
vis-form-control v1.0.8
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>