hide.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <el-button size="mini" @click="drawer = true">
  3. {{ number ? `隐藏列 :${number}` : "隐藏列" }}
  4. <el-drawer
  5. :modal="false"
  6. :visible.sync="drawer"
  7. size="20%"
  8. title="隐藏列"
  9. append-to-body
  10. >
  11. <el-input
  12. v-model="key"
  13. size="mini"
  14. placeholder="请输入列名称"
  15. style="width: 100%; padding: 0 16px 16px"
  16. >
  17. </el-input>
  18. <el-row :gutter="20" style="margin: 0">
  19. <el-draggable
  20. v-model="columns"
  21. :group="{ item: 'key' }"
  22. @end="$emit('hide')"
  23. >
  24. <el-col
  25. v-for="({ item }, index) in searchColumns"
  26. :key="index"
  27. :span="24"
  28. style="
  29. display: flex;
  30. justify-content: space-between;
  31. padding: 12px 16px;
  32. "
  33. >
  34. <span
  35. style="
  36. font-size: 13px;
  37. flex: 1;
  38. cursor: move;
  39. padding: 0 12px 0 0;
  40. text-overflow: ellipsis;
  41. overflow: hidden;
  42. word-break: break-all;
  43. white-space: nowrap;
  44. "
  45. >
  46. <i
  47. class="el-icon-mouse"
  48. style="color: #72767b; margin: 0 6px 0 0"
  49. ></i>
  50. <i
  51. class="el-icon-user"
  52. style="color: #72767b; margin: 0 6px 0 0"
  53. ></i>
  54. {{ item.title }}
  55. </span>
  56. <div>
  57. <el-switch
  58. v-model="item.hidden"
  59. size="mini"
  60. @change="$emit('hide')"
  61. ></el-switch>
  62. </div>
  63. </el-col>
  64. </el-draggable>
  65. </el-row>
  66. </el-drawer>
  67. </el-button>
  68. </template>
  69. <script>
  70. export default {
  71. name: "",
  72. components: {
  73. ElDraggable: () => import("@/components/draggable/index.vue"),
  74. },
  75. props: {
  76. value: {
  77. type: Array,
  78. require: true,
  79. },
  80. },
  81. data() {
  82. return {
  83. drawer: false,
  84. key: "",
  85. };
  86. },
  87. computed: {
  88. columns: {
  89. get() {
  90. return this.$props.value;
  91. },
  92. set(value) {
  93. this.$emit("input", value);
  94. },
  95. },
  96. searchColumns: {
  97. get() {
  98. return this.columns.filter(
  99. ({ item }) => item.title.indexOf(this.key) > -1
  100. );
  101. },
  102. set(value) {},
  103. },
  104. number: {
  105. get() {
  106. return this.columns.filter(({ item }) => !item.hidden).length;
  107. },
  108. set(value) {},
  109. },
  110. },
  111. watch: {},
  112. methods: {},
  113. created() {},
  114. mounted() {},
  115. destroyed() {},
  116. };
  117. </script>
  118. <style scoped></style>