editableCell.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="myedit">
  3. <div class="editable-cell">
  4. <div v-if="editable" class="editable-cell-input-wrapper">
  5. <a-input v-model="value" @blur="blurChange" @change="handleChange" @pressEnter="check" /><a-icon
  6. type="check"
  7. class="editable-cell-icon-check"
  8. @click="check"
  9. />
  10. </div>
  11. <div v-else class="editable-cell-text-wrapper">
  12. <span v-if="slotName=='budget'">{{ value*1? `日预算:${value*1}` :value }}</span>
  13. <span v-if="slotName=='bid'">{{ value*1? `${value*1}` :value }}</span>
  14. <span v-if="slotName=='name'">{{value}}</span>
  15. <a-icon type="edit" class="editable-cell-icon" @click="edit" />
  16. </div>
  17. </div>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. props: ["text",'slotName'],
  23. data() {
  24. return {
  25. value: this.text,
  26. editable: false,
  27. };
  28. },
  29. watch:{
  30. text:{
  31. handler(n,o){
  32. this.value=n
  33. },
  34. deep:true
  35. }
  36. },
  37. methods: {
  38. blurChange(e) {
  39. console.log(e)
  40. const value = e.target.value;
  41. if(this.slotName=='budget'){
  42. if(this.value*1){
  43. if(value*1 && value*1>300 &&value*1<9999999.99){
  44. this.value = value;
  45. }else{
  46. this.$message.error('请输入300-9999999.99的数')
  47. }
  48. }else{
  49. this.value='不限'
  50. }
  51. }else if(this.slotName=='bid'){
  52. if(this.value*1){
  53. if(value*1 && value*1>0.1 &&value*1<9999999.99){
  54. this.value = value;
  55. }else{
  56. this.$message.error('请输入0.1-9999999.99的数')
  57. }
  58. }else{
  59. this.value='不限'
  60. }
  61. }
  62. },
  63. handleChange(e){
  64. console.log(e)
  65. },
  66. check() {
  67. this.editable = false;
  68. this.$emit('change', this.value);
  69. },
  70. edit() {
  71. this.editable = true;
  72. },
  73. },
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. .myedit{
  78. .editable-cell {
  79. position: relative;
  80. }
  81. .editable-cell-input-wrapper,
  82. .editable-cell-text-wrapper {
  83. padding-right: 24px;
  84. }
  85. .editable-cell-text-wrapper {
  86. padding: 5px 24px 5px 5px;
  87. }
  88. .editable-cell-icon,
  89. .editable-cell-icon-check {
  90. position: absolute;
  91. right: 0;
  92. top: 6px;
  93. width: 20px;
  94. cursor: pointer;
  95. }
  96. .editable-cell-icon {
  97. line-height: 18px;
  98. display: none;
  99. }
  100. .editable-cell-icon-check {
  101. line-height: 28px;
  102. }
  103. .editable-cell:hover .editable-cell-icon {
  104. display: inline-block;
  105. }
  106. .editable-cell-icon:hover,
  107. .editable-cell-icon-check:hover {
  108. color: #108ee9;
  109. }
  110. .editable-add-btn {
  111. margin-bottom: 8px;
  112. }
  113. }
  114. </style>