v-tables
一个完整的数据表格组件，包含头部按钮，搜索框，底部分页等。
Installation
npm install v-tables
# or
yarn add v-tables
Usage
import Tables from 'v-tables'
import 'v-tables/lib/v-tables.css'
components: {
Tables
},
data() {
return {
date: {
columns: [{
title: 'ID',
key: 'id',
sortable: true
}, {
title: '姓名',
key: 'name',
editable: true,
searchable: true
},
{
title: '手机号',
key: 'phoneNumber',
editable: true,
searchable: true
},
{
title: '操作',
key: 'handle',
width: 180,
align: 'center',
options: ['edit', 'delete'],
}
],
tableData: [{
id: 1,
name: '小王',
phoneNumber: '15012005678'
}]
}
}
},
methods: {
handleEdit(params) {
console.log(params)
},
handleDelete(params) {
console.log(params);
},
},
<template>
<Tables :columns="columns" :value="tableData"></Tables>
</template>
or main.js
import Tables from 'v-tables'
import 'v-tables/lib/v-tables.css'
Vue.use(Tables, { baseUrl: 'http://api.host.com', token: 'xxx' })
API 在 view-design 表格的基础上的扩展
表格属性
| 属性 | 类型 | 默认值 | 说明 |
|---|
| value | Array | [] | 表格数据，对应 columns |
| resource | String | null | api，比如一个完整的 API 是 https://localhost:5001/api/user?page=1&size=10&isDeleted=false, 这里填写 user |
| editable | Boolen | false | 是否启用编辑功能 |
| editMode | String | popup | 编辑方式，"popup" 表示使用弹窗的形式编辑，"inline" 表示使用行内编辑 |
| searchable | Boolen | false | 是否支持搜索 |
| searchPlace | String | topRight | 搜索框位置，可选值：'topRight','leftBottom' |
| rules | Object | {} | 编辑时 Form 的验证规则 |
表格事件
| 事件名 | 说明 | 返回值 |
|---|
| on-view | 点击查看按钮时触发 | row：当前行数据 |
| on-edit | 点击编辑按钮时触发 | row：当前行数据 |
| on-delete | 点击删除按钮时触发 | row：当前行数据 |
表格 slot
column 属性，是 columns 中的一项
| 属性 | 类型 | 默认值 | 说明 |
|---|
| editable | Boolen | false | 是否可编辑 |
| required | Boolen | false | 编辑时是否必填 |
| searchable | Boolen | false | 是否可搜索 |
| type | String | text | 编辑数据的类型，决定了控件类型 文本框类型：text,number,email,phoneNumber,idCardNoSwitch 类型：bool,binary 单选按钮：enum 复选框：array 列表框：list 滑块：slider 评分：rate日期：date,,daterange 时间：time,datetime,timerange图标选择：icon 颜色选择：color |
| options | Array | [] | 选择项，当 type 是 bool,binary,enum,array,list 的时候必须设置选择项；当 key 为 handle 时，options 的项表示按钮，值为 "view","edit", "delete" |
| multiple | Boolen | false | type 是 list 时，表示下拉框是否多选 |
| readonly | Boolen | false | 编辑时，控件是否为只读属性 |