Nyb-table NPM | npm.io

nby-table

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>

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

npm install
npm run serve

包含demo文件，可运行查看

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

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

<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	()=>{}	数据选中回调

...

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

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

根据 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	是否可编辑暂不支持

cells示例：

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

各字段含义：

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

init

2 years ago