editablCell.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="editable-cell">
  3. <div v-if="editable" class="editable-cell-input-wrapper">
  4. <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
  5. type="check"
  6. class="editable-cell-icon-check"
  7. @click="check"
  8. />
  9. </div>
  10. <div v-else class="editable-cell-text-wrapper">
  11. <div
  12. style="width:90%;
  13. overflow:hidden;
  14. text-overflow:ellipsis;
  15. white-space:nowrap;"
  16. :title="value"
  17. >
  18. {{ value || '' }}
  19. </div>
  20. <a-icon type="edit" class="editable-cell-icon" :style="{ top: value ? '10px' : '0px' }" @click="edit" />
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. export default {
  26. props: {
  27. text: String
  28. },
  29. data() {
  30. return {
  31. value: this.text,
  32. editable: false
  33. }
  34. },
  35. methods: {
  36. handleChange(e) {
  37. const value = e.target.value
  38. this.value = value
  39. },
  40. check() {
  41. this.editable = false
  42. this.$emit('change', this.value)
  43. },
  44. edit() {
  45. this.editable = true
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. .editable-cell {
  52. position: relative;
  53. }
  54. .editable-cell-input-wrapper,
  55. .editable-cell-text-wrapper {
  56. padding-right: 24px;
  57. }
  58. .editable-cell-text-wrapper {
  59. padding: 5px 24px 5px 5px;
  60. }
  61. .editable-cell-icon,
  62. .editable-cell-icon-check {
  63. position: absolute;
  64. right: 0;
  65. width: 20px;
  66. top: 10px;
  67. cursor: pointer;
  68. }
  69. .editable-cell-icon {
  70. line-height: 18px;
  71. display: none;
  72. }
  73. .editable-cell-icon-check {
  74. line-height: 28px;
  75. }
  76. .editable-cell:hover .editable-cell-icon {
  77. display: inline-block;
  78. }
  79. .editable-cell-icon:hover,
  80. .editable-cell-icon-check:hover {
  81. color: #108ee9;
  82. }
  83. .editable-add-btn {
  84. margin-bottom: 8px;
  85. }
  86. </style>