editInput.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. const EditableCell = {
  2. template: `
  3. <div style="display:flex;align-items: center;justify-content: center;">
  4. <span>
  5. {{punit}}
  6. </span>
  7. <div class="editable-cell-input-wrapper">
  8. <a-input-number
  9. :size="size"
  10. :min="min"
  11. :max="max"
  12. :value="value"
  13. :precision="precision"
  14. :step="step"
  15. @change="handleChange"
  16. @pressEnter="check"/>
  17. </div>
  18. <a-icon
  19. type="check"
  20. slot="suffix"
  21. :title="editable?'保存':''"
  22. :style="{color: editable?'#08c':'#666', marginLeft: '5px' }"
  23. @click="check"
  24. />
  25. </div>
  26. `,
  27. props: {
  28. text: Number,
  29. precision: {
  30. type: [Number],
  31. default: 2
  32. },
  33. step: {
  34. type: [Number],
  35. default: 1
  36. },
  37. min: {
  38. type: [Number],
  39. default: 0
  40. },
  41. max: {
  42. type: [Number],
  43. default: 99999999
  44. },
  45. size: {
  46. type: String,
  47. default: 'default'
  48. },
  49. punit: {
  50. type: String,
  51. default: ''
  52. }
  53. },
  54. data() {
  55. return {
  56. value: this.text,
  57. editable: false,
  58. };
  59. },
  60. watch:{
  61. text(newVal,oldVal){
  62. this.value = newVal
  63. }
  64. },
  65. methods: {
  66. handleChange(value) {
  67. this.value = value;
  68. this.editable = true
  69. },
  70. check() {
  71. if(this.editable){
  72. this.editable = false;
  73. this.$emit('change', this.value);
  74. }
  75. },
  76. },
  77. };
  78. export default EditableCell