nyb-table

nby-table

• 作者：niuguimin
• 邮箱：[e-mail]
• 版本：1.0.21

安装

nby-* 组件 命名空间统一为 nby-，请使用以下命令进行组件安装。

Add package to your project

npm install nby-table --save
or
yarn install nby-table --save

Add NbyTable component to your project

<script>
import { NbyTable } from 'nby-table'

export default {
  components: { NbyTable },
  data() {
    return {
    }
  },
}
</script>

Example

You can clone this project and start example locally with these commands. It's in the dev folder.

npm install
npm run serve

Code

http://git.zhongqingniao.com:33333/Web_developers/nby-table

包含demo文件，可运行查看

动态表格

前端表格组件基于Vant 2实现 接口采用现有泥巴云接口

组件名称： nby-table 动态表格

1. 基本功能

<nby-table :title="title" :head="head" :cells="cells" />

通过config 进行控制基本配置信息

配置参数

Prop	Type	Default	Description
title	string	undefined	标题
head	object	undefined	表头
cellsType	array	[]	表格内容配置
cells	array	[]	表格内容
origin	string	'nby'	数据来源
onSelect	function	()=>{}	数据选中回调
...

参数说明

1. title 标题

在表格顶部在展示当前表格的标题

2. head 表头

Prop	Type	Default	Description
text	string	undefined	表头内容
align	string	'center'	对齐
order	string	[]	排序
width	string/number	'auto'	宽度
class	string/number	undefined	样式

3. cellsType 表格内容配置

根据 cellsType 加载表格内容的样式， cells加载表格的内容

Prop	Type	Default	Description
filed	string	undefined	取值字段text
align	string	'center'	对齐
type	string	'text'	文本类型 text/image/a
overflow	string	默认换行	超出是否换行
class	string/number	undefined	样式
edit	boolean	false	是否可编辑 暂不支持

4. cells 表格内容

cells示例：

[
	{
           "text":"2022-10-13",
           "href":"",
      }
]

各字段含义：

Prop	Type	Default	Description
text	string	undefined	取值字段text
href	string	'center'	跳转链接 - 需要处理，暂定是type为a是使用

Change logs

1.0.1

init