element-ui组件库中Table的使用

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

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

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

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

<!-- 放置table组件 -->
      <el-table :data="roleList">
        <!-- 放置列 -->
        <el-table-column align="center" width="200" label="角色" prop="name" />
        <el-table-column align="center" width="200" label="启用">  
         <!--template:在这是elm内置的作用域插槽,可以用来传值-->        
          <template slot-scope="scope">
            {{ scope.row.state===1? '已启用':'未启用' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template>
            <el-button size="mini" type="text">分配权限</el-button>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

数据渲染如图: 

 常用属性如下:

label	显示的标题
label	对应列内容的字段名，也可以使用 property 属性
width	对应列的宽度
align	对齐方式
border	是否带有纵向边框