elementUI-table组件

  • 当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。
  • stripe属性可以创建带斑马纹的表格。它接受一个Boolean,默认为false,设置为true即为启用。
  • 默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border属性,它接受一个Boolean,设置为true即可启用。
  • 可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
  • 纵向内容过多时,可选择固定表头。只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。
  • 横向内容过多时,可选择固定列。固定列需要使用fixed属性,它接受 Boolean 值或者leftright,表示左边固定还是右边固定。
  • 选择多行数据时使用 Checkbox。实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
  • 对表格进行排序,可快速查找或对比数据。在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort

你可能感兴趣的:(前端)