vue-sheet
A vis-vui-table component for Vue.js.
install
npm install vue-sheet
Usage
Vuevue
or
VueVue
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
Sheet Name: {{ $value.name }} Age: {{ $value.age }} Hello