index.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div class="app-container">
  3. <div class="filter-container">
  4. <el-row type="flex" justify="end">
  5. <el-col :md="2" :xs="24" class="left-align">
  6. <el-button class="filter-item blue-black" type="primary" icon="el-icon-search">新增</el-button>
  7. </el-col>
  8. <el-col :md="22" :xs="24" style="flost: right">
  9. <el-input v-model="search" :placeholder="'搜索'" style="width: 200px;" clearable />
  10. <el-button class="filter-item blue-black" type="primary" icon="el-icon-search">查询</el-button>
  11. </el-col>
  12. </el-row>
  13. </div>
  14. <el-table
  15. :data="tableData"
  16. border
  17. style="width: 100%">
  18. <el-table-column prop="data1" label="用户" ></el-table-column>
  19. <el-table-column prop="data2" label="拥有权限" ></el-table-column>
  20. <el-table-column label="操作" >
  21. <template scope="scope">
  22. <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. methods: {
  31. handleClick(row) {
  32. console.log(row);
  33. }
  34. },
  35. data() {
  36. return {
  37. search: null,
  38. tableData: [{
  39. data1: '小明',
  40. data2: '财务新增、财务删除、财务修改、财务查询'
  41. }]
  42. }
  43. },
  44. methods: {
  45. handleClick(val) {}
  46. }
  47. }
  48. </script>