
# Table 表格
---
<font color=#666>作为载体，承载并展示和传递数据数据信息，是一种可视化交流模式。</font>

### 斑马纹
* 属性```stripe```

<div class="demo-block">
	<y-table :data="tableData" border stripe >
	  <y-table-column label="表头" prop="id" min-width="300" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="200"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="200"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="200"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="200"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" width="200"></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData" border stripe >
	  <y-table-column label="表头" prop="id" min-width="300" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="200"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="200"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="200"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="200"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" width="200"></y-table-column>
	</y-table>
</template>
```
:::

### 固定头部

* 属性```height```, 当实际高度超过给定的高度，头部会固定

<div class="demo-block">
	<y-table :data="tableData" border :height="300" >
	  <y-table-column label="表头" prop="id" width="200" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="200"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="200"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="200"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="200"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" min-width="200"></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData" border height="300" >
	  <y-table-column label="表头" prop="id" width="200" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="200"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="200"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="200"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="200"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" width="200"></y-table-column>
	</y-table>
</template>

```
:::


### 固定列

* 属性```fixed```, 横向内容过多时，可选择固定列

<div class="demo-block">
	<y-table :data="tableData" border >
	  <y-table-column label="表头" prop="id" fixed width="200" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="300"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="300"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="300"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="300"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" width="400"></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
  <y-table :data="tableData" border >
	  <y-table-column label="表头" prop="id" fixed width="200" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name" width="300"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" width="300"></y-table-column>
	  <y-table-column label="表头2" prop="desc2" width="300"></y-table-column>
	  <y-table-column label="表头3" prop="desc3" width="300"></y-table-column>
	  <y-table-column label="表头4" prop="desc4" fixed="right" width="400"></y-table-column>
	</y-table>
</template>

```
:::

### 横向细分（合并行row）
<div class="demo-block">
	<y-table :data="tableData4" border :span-method="rowspanMethod">
	  <y-table-column label="物品编号" prop="id" align="right"></y-table-column>
	  <y-table-column label="物品名称" prop="name"></y-table-column>
	  <y-table-column label="规格型号" prop="desc1" ></y-table-column>
	  <y-table-column label="单位" prop="desc2" ></y-table-column>
	  <y-table-column label="采购数量" prop="desc3" ></y-table-column>
	  <y-table-column label="有效期" prop="desc4" ></y-table-column>
	  <y-table-column label="检验类型" prop="desc5" ></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
  <y-table :data="tableData" border :span-method="rowspanMethod">
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc4" ></y-table-column>
	</y-table>
</template>
<script>
	export default{
		data(){
		},
		methods:{
			rowspanMethod:  ({ row, column, rowIndex, columnIndex }) => {
				// [col, row]   {[0, 0], [1, 0], [2, 0], [3, 0], [6, 0]}
				if ([0, 1, 2, 3, 6].indexOf(columnIndex) !== -1) {
		          if (rowIndex%3 === 0) {
		            return {
		            	rowspan: 3,
		                colspan: 1
		            }
		          }else{
		          	return{
		          		rowspan:0,
		          		colspan:0
		          	}
		          }
		        }
			}
		}
	}
</script>
```
:::


### 表头纵向细分（合并列column）
<div class="demo-block">
	<y-table :data="tableData4" border>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" align="center">
		  <y-table-column label="表头3" prop="desc3" ></y-table-column>
		  <y-table-column label="表头4" prop="desc4" ></y-table-column>
		  <y-table-column label="表头5" prop="desc5" ></y-table-column>
	  </y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData4" border>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" align="center">
		  <y-table-column label="表头3" prop="desc3" ></y-table-column>
		  <y-table-column label="表头4" prop="desc4" ></y-table-column>
		  <y-table-column label="表头5" prop="desc5" ></y-table-column>
	  </y-table-column>
	</y-table>
</template>
<script>
	export default{
		data(){
		  return{
		  }
		},
		methods:{

		}
	}
</script>
```
:::

### 含单位字段
<div class="demo-block">
	<y-table :data="tableData" border>
	  <y-table-column label="汽油(元/升)" prop="id" align="right"></y-table-column>
	  <y-table-column label="柴油(元/升)" prop="desc1"></y-table-column>
	  <y-table-column label="天然气(元/升)" prop="desc2"></y-table-column>
	  <y-table-column label="路程(升/公里)" prop="desc3"></y-table-column>
	  <y-table-column label="真实油价(元/升)" prop="desc4"></y-table-column>
	  <y-table-column label="类型" prop="desc3"></y-table-column>
	  <y-table-column label="地区" prop="name"></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData" border>
	  <y-table-column label="汽油(元/升)" prop="id" align="right"></y-table-column>
	  <y-table-column label="柴油(元/升)" prop="desc1"></y-table-column>
	  <y-table-column label="天然气(元/升)" prop="desc2"></y-table-column>
	  <y-table-column label="路程(升/公里)" prop="desc3"></y-table-column>
	  <y-table-column label="真实油价(元/升)" prop="desc4"></y-table-column>
	  <y-table-column label="类型" prop="desc3"></y-table-column>
	  <y-table-column label="地区" prop="name"></y-table-column>
	</y-table>
</template>
```
:::

### 字段过长时
<font color=#666>```tooltip-effect="dark"```弹框样式, ```show-overflow-tooltip```是否溢出显示 </font>
<div class="demo-block">
	<y-table :data="tableData4" border tooltip-effect="dark">
	  <y-table-column label="线路名称" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="desc1"></y-table-column>
	  <y-table-column label="表头" prop="desc2"></y-table-column>
	  <y-table-column label="表头" prop="desc3"></y-table-column>
	  <y-table-column label="中华人民共和国社会保障卡余额查询中华人民共和国社会保障卡余额查询" prop="desc5" :show-overflow-tooltip="true"></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData4" border tooltip-effect="dark">
	  <y-table-column label="线路名称" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="desc1"></y-table-column>
	  <y-table-column label="表头" prop="desc2"></y-table-column>
	  <y-table-column label="表头" prop="desc3"></y-table-column>
	  <y-table-column label="中华人民共和国社会保障卡余额查询中华人民共和国社会保障卡余额查询" prop="desc5" :show-overflow-tooltip="true"></y-table-column>
	</y-table>
</template>
```
:::

### 表格无数据
<font color=#666>十倍行间距</font><br>
<font color=#666>可以用```slot```自定义标签和样式, ```emptyType='pic'```是否包含图片，暂不支持修改无数据图片</font>

<div class="demo-block">
	<y-table :data="[]" border emptyType="pic">
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc4" ></y-table-column>
	  <div slot="empty"><p class="empty-text">{{nodataText}}<a v-if="tryAgain">重试</a></p></div>
	</y-table>
	<div class="style-toggle">
		<p>切换样式</p>
		<y-radio-group v-model="nodata" @change="nodataChange">
			<y-radio label="1">默认无数据</y-radio>
			<y-radio label="2">搜索无数据</y-radio>
			<y-radio label="3">加载失败</y-radio>
		</y-radio-group>
	</div>
</div>

::: demo

``` html
<template>
	<y-table :data="[]" border emptyType="pic">
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc4" ></y-table-column>
	  <div slot="empty"><p class="empty-text">自定义文案</p></div>
	</y-table>
</template>
```
:::


<font color=#666>二倍行间距</font>

<div class="demo-block">
	<y-table :data="[]" border :emptyText="nodataText2">
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc4" ></y-table-column>
	</y-table>
	<div class="style-toggle">
		<p>切换样式</p>
		<y-radio-group v-model="nodata2" @change="nodataChange2">
			<y-radio label="1">默认无数据</y-radio>
			<y-radio label="2">搜索无数据</y-radio>
			<y-radio label="3">加载失败</y-radio>
		</y-radio-group>
	</div>
</div>

::: demo

``` html
<template>
	<y-table :data="[]" border emptyText="自定义文案">
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc4" ></y-table-column>
	</y-table>
</template>
```
:::

### 表格带操作
<font color=#666>带选择功能</font>

<div class="demo-block">
	<y-table :data="tableData4" border @selection-change="selectionChange" @select="select" @select-all="selectAll">
	  <y-table-column type="selection" align="center"></y-table-column>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc5" ></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData4" border>
	  <y-table-column type="selection" align="center"></y-table-column>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="表头2" prop="desc2" ></y-table-column>
	  <y-table-column label="表头3" prop="desc3" ></y-table-column>
	  <y-table-column label="表头4" prop="desc5" ></y-table-column>
	</y-table>
</template>
<script>
	export default{
		data(){
		  return{
		  }
		},
		methods:{
			selectionChange (row) {
				console.log(row)
			},
			select (row, idex) {
				console.log(row, idex, 'ppp')
			},
            selectAll (row) {
				console.log(row )
			}
		}
	}
</script>
```
:::

<font color=#666>带增加，删除，修改，查看功能</font>

<div class="demo-block">
	<y-table :data="tableData4" border>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="操作" prop="desc2" >
	  	<template slot-scope="scope">
	  		<y-button :type="btnStyle" mini @click="show(scope.row)">查看</y-button>
	  		<y-button :type="btnStyle" mini>修改</y-button>
	  		<y-button :type="btnStyle" mini>删除</y-button>
	  	</template>
	  </y-table-column>
	</y-table>
	<div class="style-toggle">
		<p>切换样式</p>
		<y-radio-group v-model="btnStyle">
			<y-radio label="link">样式一</y-radio>
			<y-radio label="assist">样式二</y-radio>
		</y-radio-group>
	</div>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData4" border>
	  <y-table-column label="表头" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头" prop="name"></y-table-column>
	  <y-table-column label="表头1" prop="desc1" ></y-table-column>
	  <y-table-column label="操作" prop="desc2" >
	  	<template slot-scope="scope">
	  		<y-button type="link" mini>查看</y-button>
	  		<y-button type="link" mini>修改</y-button>
	  		<y-button type="link" mini>删除</y-button>
	  	</template>
	  </y-table-column>
	</y-table>
</template>
<script>
	export default{
		data(){
		  return{
		  }
		},
		methods:{
			show (row) {
				console.log(row)
			}
		}
	}
</script>
```
:::

### 表格定宽
<font color=#666>根据实际场景使用</font>

<div class="demo-block">
	<y-table :data="tableData" border>
	  <y-table-column label="表头1" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头2" prop="name"></y-table-column>
	  <y-table-column label="表头3" prop="desc1" ></y-table-column>
	  <y-table-column label="表头4" prop="desc2" ></y-table-column>
	</y-table>
</div>

::: demo

``` html
<template>
	<y-table :data="tableData" border>
	  <y-table-column label="表头1" prop="id" align="right"></y-table-column>
	  <y-table-column label="表头2" prop="name"></y-table-column>
	  <y-table-column label="表头3" prop="desc1" ></y-table-column>
	  <y-table-column label="表头4" prop="desc2" ></y-table-column>
	</y-table>
</template>
```
:::


<!-- 代码 -->

<script>
	export default{
		data(){
			return{
				tableData4: [{
			        id: '1111',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '中华人民共和国社会保障卡余额查询中华人民共和国社会保障卡余额查询'
			      },
			      {
			        id: '2222',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      },
			      {
			        id: '3333',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      },
			      {
			        id: '4444',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      },
			      {
			        id: '5555',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      },
			      {
			        id: '6666',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      },
			      {
			        id: '7777',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			        desc5: '表格内容'
			      }],
				tableData: [{
			        id: '1111',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '2222',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '3333',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '4444',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '5555',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '6666',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '7777',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      },
			      {
			        id: '8888',
			        name: '表格内容',
			        desc1: '表格内容',
			        desc2: '表格内容',
			        desc3: '表格内容',
			        desc4: '表格内容',
			      }],
				  nodata: 1,
				  nodataText: '暂无数据',
				  nodata2: 1,
				  nodataText2: '暂无数据',
				  btnStyle: 'assist',
				  tryAgain:false
				}
		},
		methods: {
			rowspanMethod:  ({ row, column, rowIndex, columnIndex }) => {
				// [col, row]   {[0, 0], [1, 0], [2, 0], [3, 0], [6, 0]}
				if ([0, 1, 2, 3, 6].indexOf(columnIndex) !== -1) {
		          if (rowIndex%3 === 0) {
		            return {
		            	rowspan: 3,
		                colspan: 1
		            }
		          }else{
		          	return{
		          		rowspan:0,
		          		colspan:0
		          	}
		          }
		        }
			},
			nodataChange () {
			  this.tryAgain=false
              if (this.nodata === '1') {
              	this.nodataText = '暂无数据'
              } else if (this.nodata === '2') {
                this.nodataText = '抱歉，没有找到符合条件的数据！'
              } else {
                this.nodataText = '加载失败,请'
                this.tryAgain=true
              }
			},
			nodataChange2 () {
              if (this.nodata2 === '1') {
              	this.nodataText2 = '暂无数据'
              } else if (this.nodata2 === '2') {
                this.nodataText2 = '抱歉，没有找到符合条件的数据！'
              } else {
                this.nodataText2 = '加载失败'                
              }
			},
			show (row) {
				console.log(row)
			},
			selectionChange (row) {
				console.log(row)
			},
			select (row, idex) {
				console.log(row, idex, 'ppp')
			},
            selectAll (row) {
				console.log(row )
			}
			// colspanMethod({ row, column, rowIndex, columnIndex }){
			// 	if (rowIndex % 2 === 0) {
			//          if (columnIndex === 0) {
			//            return {
			//            	rowspan: 1,
			//                colspan: 2
			//            }
			//          } else if (columnIndex === 1) {
			//            return{
			//          		rowspan:0,
			//          		colspan:0
			//          	}
			//          }
			//        }
			// }
		}
	}
</script>

### y-table 属性说明

| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|data|显示的数据|Array|--|--|
|height|默认是auto，给了值，会固定头部|String|--|--|
|stripe|是否有斑马纹|Boolean|--|false|
|border|是否带有纵向边框|Boolean|--|false|
|span-method|合并行或列的计算方法|Function({ row, column, rowIndex, columnIndex })|--|--|

### y-table-column 属性说明

| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|label|显示的标题|string|--|--|
|prop|对应列内容的字段名，也可以使用 property 属性|String|--|--|
|width|对应列的宽度|string|--|--|
|min-width|对应列的最小宽度|string|--|--|
|fixed|列是否固定在左侧或者右侧，true 表示固定在左侧|string|string, boolean|left|
|align|对齐方式|String|left/center/right|left|




