element表格与抽屉组件

抽屉组件

<el-row>
  <el-button type="primary" round @click="drawer = true">添加用户</el-button>
</el-row>
<!-- visible 控制抽屉的显示与隐藏，值为boolean 
     direction Drawer 打开的方向 默认为从右到左
     wrapperClosable 点击遮罩层是否可以关闭 Drawer，值为boolean -->
<el-drawer
  title="添加用户"
  :visible.sync="drawer"
  :direction="direction"
  :wrapperClosable="false"
>
  <add-users @addok="addok" />
</el-drawer>
复制代码

表格组件

<!-- tableData 表格的数据源 -->
<el-table :data="tableData">
<!-- prop属性对应对象中的键名即可填入数据，label属性定义表格的列名 -->
  <el-table-column prop="id" label="ID" width="100"> </el-table-column>
  <el-table-column prop="username" label="用户名"> </el-table-column>
  <el-table-column prop="role_name" label="角色名称"> </el-table-column>
  <el-table-column prop="email" label="电子邮箱"> </el-table-column>
  <el-table-column prop="mobile" label="手机号码"> </el-table-column>
  <el-table-column label="创建时间">
    <!-- create_time 是一个毫秒数 使用prop属性不能使用过滤器 通过作用域插槽实现返回格式化时间 -->
    <template slot-scope="scope">
      <!-- scope.row element表格组件默认传入一行的数据对象 -->
      <div>{{ scope.row.create_time | getDate }}</div>
    </template>
  </el-table-column>
</el-table>