index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class="top-right-btn">
  3. <el-row>
  4. <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
  5. <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
  6. </el-tooltip>
  7. <el-tooltip class="item" effect="dark" content="刷新" placement="top">
  8. <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
  9. </el-tooltip>
  10. <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
  11. <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
  12. </el-tooltip>
  13. </el-row>
  14. <el-dialog :title="title" :visible.sync="open" append-to-body>
  15. <el-transfer
  16. :titles="['显示', '隐藏']"
  17. v-model="value"
  18. :data="columns"
  19. @change="dataChange"
  20. ></el-transfer>
  21. </el-dialog>
  22. </div>
  23. </template>
  24. <script>
  25. export default {
  26. name: "RightToolbar",
  27. data() {
  28. return {
  29. // 显隐数据
  30. value: [],
  31. // 弹出层标题
  32. title: "显示/隐藏",
  33. // 是否显示弹出层
  34. open: false,
  35. };
  36. },
  37. props: {
  38. showSearch: {
  39. type: Boolean,
  40. default: true,
  41. },
  42. columns: {
  43. type: Array,
  44. },
  45. },
  46. created() {
  47. // 显隐列初始默认隐藏列
  48. for (let item in this.columns) {
  49. if (this.columns[item].visible === false) {
  50. this.value.push(parseInt(item));
  51. }
  52. }
  53. },
  54. methods: {
  55. // 搜索
  56. toggleSearch() {
  57. this.$emit("update:showSearch", !this.showSearch);
  58. },
  59. // 刷新
  60. refresh() {
  61. this.$emit("queryTable");
  62. },
  63. // 右侧列表元素变化
  64. dataChange(data) {
  65. for (let item in this.columns) {
  66. const key = this.columns[item].key;
  67. this.columns[item].visible = !data.includes(key);
  68. }
  69. },
  70. // 打开显隐列dialog
  71. showColumn() {
  72. this.open = true;
  73. },
  74. },
  75. };
  76. </script>
  77. <style lang="scss" scoped>
  78. ::v-deep .el-transfer__button {
  79. border-radius: 50%;
  80. padding: 12px;
  81. display: block;
  82. margin-left: 0px;
  83. }
  84. ::v-deep .el-transfer__button:first-child {
  85. margin-bottom: 10px;
  86. }
  87. </style>