12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- const EditableCell = {
- template: `
- <div style="display:flex;align-items: center;justify-content: center;">
- <span>
- {{punit}}
- </span>
- <div class="editable-cell-input-wrapper">
- <a-input-number
- :size="size"
- :min="min"
- :max="max"
- :value="value"
- :precision="precision"
- :step="step"
- @change="handleChange"
- @pressEnter="check"/>
- </div>
- <a-icon
- type="check"
- slot="suffix"
- :title="editable?'保存':''"
- :style="{color: editable?'#08c':'#666', marginLeft: '5px' }"
- @click="check"
- />
- </div>
- `,
- props: {
- text: Number,
- precision: {
- type: [Number],
- default: 2
- },
- step: {
- type: [Number],
- default: 1
- },
- min: {
- type: [Number],
- default: 0
- },
- max: {
- type: [Number],
- default: 99999999
- },
- size: {
- type: String,
- default: 'default'
- },
- punit: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- value: this.text,
- editable: false,
- };
- },
- watch:{
- text(newVal,oldVal){
- this.value = newVal
- }
- },
- methods: {
- handleChange(value) {
- this.value = value;
- this.editable = true
- },
- check() {
- if(this.editable){
- this.editable = false;
- this.$emit('change', this.value);
- }
- },
- },
- };
- export default EditableCell
|