td标签可编辑（vue版本）

<template>
  <td class="edit-div"
      v-html="innerText"
      :contenteditable="canEdit"
      @focus="isLocked = true"
      @blur="isLocked = false"
      @input="changeText">
  </td>
</template>
<script type="text/babel">
  export default{
    name: 'v-edit-td',
    props: {
      value: {
        type: String,
        default: ''
      },
      canEdit: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        innerText: this.value,
        isLocked: false
      }
    },
    watch: {
      value() {
        if (!this.isLocked || !this.innerText) {
          this.innerText = this.value;
        }
      }
    },
    methods: {
      changeText() {
        this.$emit('input', this.$el.innerHTML);
      }
    }
  }
</script>
<style scoped>
  .edit-div {
    width: 100%;
    height: 100%;
    overflow: auto;
    word-break: break-all;
    outline: none;
    user-select: text;
    white-space: pre-wrap;
    text-align: left;
    &[contenteditable=true]{
      user-modify: read-write-plaintext-only;
      &:empty:before {
        content: attr(placeholder);
        display: block;
        color: #ccc;
      }
    }
  }
</style>