nby-table

• 作者：niuguimin
• 邮箱：[email protected]
• 版本：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