- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## BeTable 表格

1. TODO：优化自定义表格列 / 无法动态添加 slot
2. emptyText:String;空数据时显示的文本内容，也可以通过 slot="empty"设置; 默认：暂无数据
3. fullUpdate false/true 全量更新 在动态改变table dom的时候使用

# 基础表格

1. placeholder 无数据的时候 替代的标识 默认为''
2. placeholderRegex 无数据的时候回调函数 Boolean
3. BeTable align='center' 对齐方式 String left/center/right 默认 left
4. BeTableColumn align='center' 对齐方式 String left/center/right 默认 left
5. BeTableColumn headeralign='left' 表头对齐方式，若不设置该项，则使用表格的对齐方式 String left/center/right 默认 ''

暂无数据
通过给 prop=index 的列传入 index 属性，可以自定义索引。 该属性传入数字时，将作为索引的起始值（从 1 开始）。 也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

    import { BeTable, BeTableColumn} from '@brewer/beerui'
    const indexMethod = (index) => {
    	return index * 2;
    }
    const tableData = [{
    	date: '2016-05-02',
    	name: '王小虎',
    	address: '上海市普陀区金沙江路 1518 弄'
    }, {
    	date: '2016-05-04',
    	 name: '王小虎',
    	 address: '上海市普陀区金沙江路 1517 弄'
    }, {
    	date: '2016-05-03',
    	 name: '王小虎',
    	 address: '上海市普陀区金沙江路 1519 弄'
    }, {
    	date: '2016-05-01',
    	 name: '王小虎',
    	 address: '上海市普陀区金沙江路 1519 弄'
    }]
    const placeholderRegexHandle = (v) => v === undefined || v === 'undefined'

    <BeTable data={tableData} placeholder="-" placeholderRegex={placeholderRegexHandle} indexMethod={indexMethod}>
    	<BeTableColumn width="600" type="index" prop='index' label='索引' />
        <BeTableColumn align='center' headeralign='left' width="355" prop='name' label='姓名' />
    	<BeTableColumn prop='placeholder' label='placeholder' />
    	<BeTableColumn prop="date" label="日期" />
    	<BeTableColumn prop="address" label="地址" />
    </BeTable>

显示代码

# 带斑马纹/带边框/带状态表格

暂无数据

# 带状态表格

暂无数据
stripe、border、rowClassName Table 的样式。

    let tableRowClassName = ({row, rowIndex}) => {
    	if (rowIndex === 1) {
    	return 'warning-row';
    	} else if (rowIndex === 3) {
    	return 'success-row';
    	}
    	return '';
    };

    <BeTable data={tableData} stripe border rowClassName={tableRowClassName}>
    	<BeTableColumn prop="name" label="姓名" />
    	<BeTableColumn prop="date" label="日期" />
    	<BeTableColumn prop="address" label="地址" />
    </BeTable>

显示代码

# 固定表头

暂无数据
只要在be-table元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。
显示代码

# 多级表头

暂无数据
嵌套 BeTableColumn 。

    <BeTable data={mutilTableData} height="250px" border>
    	<BeTableColumn prop='date' label='日期' width='150' />
    	<BeTableColumn label="配送信息">
    		<BeTableColumn prop='name' label='姓名' width='120' />
    		<BeTableColumn label="地址">
    			<BeTableColumn prop='province' label='省份' width='120' />
    			<BeTableColumn prop='city' label='市区' width='120' />
    			<BeTableColumn prop='address' label='地址' width='300' />
    			<BeTableColumn prop='zip' label='邮编' />
    		</BeTableColumn>
    	</BeTableColumn>
    </BeTable>

显示代码

## 多选

选择多行数据时使用 Checkbox。

# 自定义表格

暂无数据

1. 行中必须存在id字段,用户传入标识`label=ids` 默认label为id(待优化 自动生成id)
2. toggleRowTable.toggleRowSelection(item[2, 3]) 切换第二、第三行的选中状态 传入[]等同于清空所有
3. handleSelectionChangeGetId 获取选中的ID
4. handleSelectionChangeGetRows 获取选中的行数据 rows
5. clearSelection 用于多选表格，清空用户的选择
6. toggleRowSelection(row, selected) row: [1, 2] id，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
7. toggleAllSelection() 用于多选表格，切换所有行的选中状态

    const checkBoxTableData = [{
      ids: '1',
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }]
    let toggleRowTable = null
    const toggleRowSelectionHandle = (item) => {
    	console.log('toggleRowTable', toggleRowTable);
    	toggleRowTable.toggleRowSelection(item)
    };
    const handleSelectionChangeGetId = ({ detail }) => console.log('handleSelectionChangeGetId', detail);
    const handleSelectionChangeGetRows = ({ detail }) => console.log('handleSelectionChangeGetRows', detail);

    <BeButton on:click={() => toggleRowSelectionHandle([2, 3])}>切换第二、第三行的选中状态</BeButton>
    <BeButton on:click={() => toggleRowSelectionHandle([])}>取消选择</BeButton>

    <BeTable
    bind:this={toggleRowTable}
    label='ids'
    data={checkBoxTableData}
    on:handleSelectionChangeGetId={handleSelectionChangeGetId}
    on:handleSelectionChangeGetRows={handleSelectionChangeGetRows}
    >
    	<BeTableColumn prop='selection' width="55" />
    	<BeTableColumn prop='name' label='姓名' />
    	<BeTableColumn prop='date' label='日期' />
    </BeTable>

显示代码

# 自定义表格

暂无数据

1. 传入prop为 tableSlot
2. 提供了 slot/插槽对应到不同的自定义列中
3. 只提供了 tableSlot1 - tableSlot10(待优化)
4. let:prop绑定的是 当前表格行的数据

    let clickBtn1 = (row) => {
    	console.log('clickBtn1');
    	console.log(row);
    };
    let clickBtn2 = () => {
    	console.log('clickBtn2');
    };

    <BeTable data={tableTempData}>
    	<BeTableColumn prop="name" label="姓名" />
    	<BeTableColumn prop="date" label="日期" />
    	<BeTableColumn prop="tableSlot" name='tableSlot1' label="操作1" />
    	<BeTableColumn prop="tableSlot" name='tableSlot2' label="操作2" />
    	<div slot="tableSlot1" let:prop={row}>
    		<BeButton on:click={() => clickBtn1(row)}>默认1</BeButton>
    		<BeButton>默认1</BeButton>
    	</div>
    	<div slot="tableSlot2">
    		<BeButton on:click={clickBtn2}>默认2</BeButton>
    		<BeButton>默认2</BeButton>
    	</div>
    </BeTable>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 标题 | string | - | ''

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
close | 关闭的回调 | ''

### Slot

name | 说明
--- | ---
icon | 标题前的icon