RightHandler.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!--
  2. * @Author: your name
  3. * @Date: 2022-01-07 14:12:57
  4. * @LastEditTime: 2022-01-08 15:44:36
  5. * @LastEditors: Please set LastEditors
  6. * @Description: 右侧默认的组件
  7. * @FilePath: \goldenPig\src\components\table-cpn\RightHandler.vue
  8. -->
  9. <template>
  10. <div class="right-handler">
  11. <el-tooltip effect="dark" content="刷新" placement="top">
  12. <div class="right-a">
  13. <i class="el-icon-refresh-right i-size"></i>
  14. </div>
  15. </el-tooltip>
  16. <el-tooltip effect="dark" content="密度" placement="top">
  17. <el-dropdown trigger="click" placement="bottom">
  18. <div class="right-a">
  19. <i class="el-icon-rank i-size"></i>
  20. </div>
  21. <el-dropdown-menu slot="dropdown" class="reset-dropdown">
  22. <el-dropdown-item @click.native="clickSize(0)">
  23. 默认
  24. </el-dropdown-item>
  25. <el-dropdown-item @click.native="clickSize(1)">
  26. 中等
  27. </el-dropdown-item>
  28. <el-dropdown-item @click.native="clickSize(2)">
  29. 紧凑
  30. </el-dropdown-item>
  31. </el-dropdown-menu>
  32. </el-dropdown>
  33. </el-tooltip>
  34. </div>
  35. </template>
  36. <script>
  37. export default {
  38. model: {
  39. prop: "size",
  40. event: "sizeChange",
  41. },
  42. props: ["size"],
  43. data() {
  44. return {
  45. sizeArr: ["small", "medium", "mini"],
  46. };
  47. },
  48. methods: {
  49. clickSize(index) {
  50. this.$emit("sizeChange", this.sizeArr[index]);
  51. },
  52. },
  53. };
  54. </script>
  55. <style scoped>
  56. .right-handler {
  57. display: flex;
  58. }
  59. .right-a {
  60. display: flex;
  61. flex-direction: row;
  62. align-items: center;
  63. }
  64. .i-size {
  65. font-size: 20px;
  66. cursor: pointer;
  67. margin-left: 10px;
  68. }
  69. .reset-dropdown {
  70. margin-left: 6px;
  71. }
  72. </style>