iview UI Table 使用总结
表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用场景一场景简述表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字实现使用column中的renderHeaderAPIrenderHeader自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是...
·
表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用
场景一
场景简述
表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字
实现
- 使用
column
中的renderHeader
API renderHeader
自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是h
,第二个为对象,包含column
和index
,分别为当前列数据和当前列索引。
<Table stripe ref="currentRowTable" :columns="columns" :data="data"></Table>
columns: [
{
type: 'index',
title: '序号',
width: 60,
align: 'center',
},
{
title: '姓名',
key: 'name',
align: 'center',
render: (h, params) => {
return h('Input', {
props: {
type: 'text',
value: this.data[params.index].name,
},
on: {
'on-blur': (event: any) => {
this.data[params.index].name = event.target.value;
},
},
});
},
},
{
title: '出生年月',
key: 'birthday',
align: 'center',
render: (h, params) => {
return h('DatePicker', {
props: {
type: 'month',
value: this.data[params.index].birthday,
},
on: {
'on-change': (event) => {
// event 即为日期字符串值
this.data[params.index].birthday = event;
},
},
});
},
},
{
title: '数量或体积',
key: 'numbers',
align: 'center',
width: 120,
// 动态根据外部type变量来替换title的名字
renderHeader: (h: any, params: any) => {
const title = this.formValidate.type === '' ? '数量或体积' :
this.formValidate.type === '0' ? '数量(枚)' :
'体积(L)';
return h('span', title);
},
render: (h: any, params: any) => {
return h('Input', {
props: {
type: 'text',
value: (this as any).data[params.index].numbers,
},
on: {
'on-blur': (event: any) => {
(this as any).data[params.index].numbers = event.target.value;
},
},
});
},
},
],
data: [
{
name: 'test',
birthday: '1998-06',
numbers: 0
},
];
场景二
场景简述
截止到目前使用iview@3.1.2
版本中,如果给Table
组件添加border
(是否显示纵向边框)属性时,当table暂无数据时,会出现横向滚动条.
解决方案
- 简介粗暴的话直接去掉该属性
- 当为表格添加纵向边框时,由于宽度为定值,导致出现滚动条,可以为表格里面的每一列设置
box-sizing: border-box
场景三
场景简述
有时候会使用到内嵌表格
实现
- 内嵌表格去掉表头
show-header
Table 设置为false
- 使用
render
API
<Table :columns="columns" :data="data"></Table>
columns: [
{
type: 'index',
title: '序号',
width: 60,
align: 'center',
},
{
title: '内嵌表格',
key: 'table',
align: 'center',
render: (h, params) => {
return h('Table', {
props: {
columns: this.data[params.index].columns,
data: this.data[params.index].data,
showHeader: false // 不展示内嵌表格的表头
},
});
},
},
],
data: [
{
columns: [
{
title: '姓名',
key: 'name',
align: 'center',
},
{
title: '年龄',
key: 'age',
align: 'center',
}
],
data: [
{
name: 'test',
age: 10
}
]
},
];
更多推荐
已为社区贡献11条内容
所有评论(0)