Newer
Older
KaiFengPC / src / components / RightToolbar / index.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <div class="top-right-btn" :style="style">
  3. <el-row>
  4. <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
  5. <el-button circle icon="Search" @click="toggleSearch()" />
  6. </el-tooltip>
  7. <el-tooltip class="item" effect="dark" content="刷新" placement="top">
  8. <el-button circle icon="Refresh" @click="refresh()" />
  9. </el-tooltip>
  10. <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
  11. <el-button circle icon="Menu" @click="showColumn()" />
  12. </el-tooltip>
  13. </el-row>
  14. <el-dialog :title="title" v-model="open" append-to-body>
  15. <el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
  16. </el-dialog>
  17. </div>
  18. </template>
  19.  
  20. <script setup>
  21. const props = defineProps({
  22. showSearch: {
  23. type: Boolean,
  24. default: true,
  25. },
  26. columns: {
  27. type: Array,
  28. },
  29. search: {
  30. type: Boolean,
  31. default: true,
  32. },
  33. gutter: {
  34. type: Number,
  35. default: 10,
  36. },
  37. });
  38.  
  39. const emits = defineEmits(['update:showSearch', 'queryTable']);
  40.  
  41. // 显隐数据
  42. const value = ref([]);
  43. // 弹出层标题
  44. const title = ref('显示/隐藏');
  45. // 是否显示弹出层
  46. const open = ref(false);
  47.  
  48. const style = computed(() => {
  49. const ret = {};
  50. if (props.gutter) {
  51. ret.marginRight = `${props.gutter / 2}px`;
  52. }
  53. return ret;
  54. });
  55.  
  56. // 搜索
  57. function toggleSearch() {
  58. emits('update:showSearch', !props.showSearch);
  59. }
  60.  
  61. // 刷新
  62. function refresh() {
  63. emits('queryTable');
  64. }
  65.  
  66. // 右侧列表元素变化
  67. function dataChange(data) {
  68. for (let item in props.columns) {
  69. const key = props.columns[item].key;
  70. props.columns[item].visible = !data.includes(key);
  71. }
  72. }
  73.  
  74. // 打开显隐列dialog
  75. function showColumn() {
  76. open.value = true;
  77. }
  78.  
  79. // 显隐列初始默认隐藏列
  80. for (let item in props.columns) {
  81. if (props.columns[item].visible === false) {
  82. value.value.push(parseInt(item));
  83. }
  84. }
  85. </script>
  86.  
  87. <style lang="scss" scoped>
  88. :deep(.el-transfer__button) {
  89. border-radius: 50%;
  90. display: block;
  91. margin-left: 0px;
  92. }
  93. :deep(.el-transfer__button:first-child) {
  94. margin-bottom: 10px;
  95. }
  96. :deep(.el-button) {
  97. background: #004770;
  98. border-color: #004770;
  99. }
  100.  
  101. .my-el-transfer {
  102. text-align: center;
  103. }
  104. </style>