iview UI Table 使用总结

表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用

场景一

场景简述

表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字

实现

  • 使用column中的renderHeaderAPI
    • renderHeader自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 columnindex,分别为当前列数据和当前列索引。

场景二

场景简述

截止到目前使用iview@3.1.2版本中,如果给Table组件添加border(是否显示纵向边框)属性时,当table暂无数据时,会出现横向滚动条.

解决方案

  1. 简介粗暴的话直接去掉该属性
  2. 当为表格添加纵向边框时,由于宽度为定值,导致出现滚动条,可以为表格里面的每一列设置box-sizing: border-box

场景三

场景简述

有时候会使用到内嵌表格

实现

  1. 内嵌表格去掉表头 show-header Table 设置为 false
  2. 使用render API
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复