vill-table
v1.0.4
Published
a table component base on vuejs2.6
Downloads
13
Readme
vill-table
a vue plugins about table
Build Setup
install the plugin on bash
npm install vill-table --save-dev
register the plugins on the vue project in the entry file (main.js)
import Table from 'vill-table'
Vue.use(Table);
on the vue template file ,you can use it by the follow example
<template>
<div class="demo">
<vill-table :columns="columns5" :data="data5"></vill-table>
</div>
</template>
<script>
export default {
data() {
return {
columns5: [
{
title: "Date",
key: "date"
// sortable: true
},
{
title: "Name",
key: "name"
},
{
title: "Age",
key: "age",
sortable: true
},
{
title: "Address",
key: "address"
},
{
title: "Action",
key: "action",
align: 'center',
render: (h, params) => {
return h(
"div",
{
style: {
textAlign: params.align
}
},
[
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.show(params.index);
}
}
},
"View"
),
h(
"Button",
{
props: {
type: "error",
size: "small"
},
on: {
click: () => {
this.remove(params.index);
}
}
},
"Delete"
)
]
);
}
}
],
data5: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03"
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01"
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
}
]
};
},
methods: {
remove(params) {
console.log(params);
},
show(params) {
console.log(params);
}
}
};
</script>
<style>
</style>
输入字段
| 字段 | 说明 | 类型 | 默认值 | | --------- | ----------------- | ------- | ------ | | columns | 表格头部数据| - | - | | data | 每一行数据| - | - |
columns属性
| 字段 | 说明 | 类型 | 默认值 | | --------- | ----------------- | ------- | ------ | | title | 表头title值| String | - | | key |表头title的唯一key| String | - | | sortable |是否显示排序(true/false)| Boolean | - | | render |渲染函数| Function | 可以自定义渲染内容 |