element-ui组件库中Table的使用

Table 一般多用于后台数据管理系统 , 用来展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据.

当然也可以放置按钮,input输入框.switch开关等等.


      
        
        
          
                 
          
        
        
        
          
          
        
      

数据渲染如图: 

element-ui组件库中Table的使用_第1张图片 常用属性如下:

label 显示的标题
label 对应列内容的字段名,也可以使用 property 属性
width

对应列的宽度

align 对齐方式
border 是否带有纵向边框

你可能感兴趣的:(vue.js,elementui,javascript)