<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row type="flex" justify="end">
        <el-col :md="2" :xs="24" class="left-align">
          <el-button class="filter-item blue-black" type="primary" icon="el-icon-search">新增</el-button>
        </el-col>
        <el-col :md="22" :xs="24" style="flost: right">
          <el-input v-model="search" :placeholder="'搜索'" style="width: 200px;" clearable />
          <el-button class="filter-item blue-black" type="primary" icon="el-icon-search">查询</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column prop="data1" label="用户" ></el-table-column>
      <el-table-column prop="data2" label="昵称" ></el-table-column>
      <el-table-column prop="data3" label="所属" ></el-table-column>
      <el-table-column prop="data4" label="账号类型" ></el-table-column>
      <el-table-column prop="data5" label="用户组" ></el-table-column>
      <el-table-column prop="data6" label="最后登录时间" ></el-table-column>
      <el-table-column prop="data7" label="登录次数" ></el-table-column>
      <el-table-column prop="data8" label="状态" ></el-table-column>
      <el-table-column label="操作" >
        <template scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        search: null,
        tableData: [{
          data1: '小明',
          data2: '小明',
          data3: '上海',
          data4: '小区',
          data5: '财务',
          data6: '2019-11-06 17:12',
          data7: 23,
          data8: '正常'
        }]
      }
    },

    methods: {
      handleClick(val) {}
    }
  }
</script>