Vue Render 函数 Table内编辑 应用

Vue Render 函数 Table内编辑 应用

前言

在以前版本中，通过在table中嵌套span和input的方式，来实现这个功能，但是在实际使用过程中，代码会显得特别的冗长繁琐。这个时候，可以通过使用render函数来解决这个问题。

思路

思路的话，大概都是一样的，通过控制其span、input的显隐来实现，点击后更改的作用。

代码部分

通过creatElement创建一个divVNode,在再其中创建span的和input的VNode。

createElement('el-input', {}),
createElement('span', {}),

span VNode

domProps插入基础属性，再通过attrs赋值，通过class来控制showClass属性是否生效。

on中，通过input方法，将input中的value值传递到父级中，父级将值赋给当前单元格。

blur则是当input失去焦点时，隐藏input，使span显示。

domProps: {
  value: '',
},
ref: 'input',
attrs: {
  value: this.value
},
on: {
  input: (event) => {
    this.$emit('input', event)
  },
  blur: () => {
    this.show = 'text'
    this.$emit('refreshTable')
  },
},
class: {
  showClass: this.show != 'input',
},

完整代码

外部代码

scope.row.date为行数据中单元格的数据

refreshTable是为了保证每次更新数据时，单元格能即使刷新

<radect :value="scope.row.date"
        @input="scope.row.date = $event"
        @refreshTable="refreshTable"></radect>

组件代码

<script>
export default {
  props: ['value'],
  data () {
    return {
      show: 'text' //控制文本和输入框显影
    }
  },
  render: function (createElement) {
    return createElement('div', [
      createElement('el-input', {
        domProps: {
          value: '',
        },
        ref: 'input',
        attrs: {
          value: this.value
        },
        on: {
          input: (event) => {
            this.$emit('input', event)
          },
          blur: () => {
            this.show = 'text'
            this.$emit('refreshTable')
          },
        },
        class: {
          showClass: this.show != 'input',
        },
      }),
      createElement('span', {
        domProps: {
          innerText: this.value
        },
        on: {
          click: () => {
            this.show = 'input'
            this.$nextTick(() => {
              this.$refs.input.focus()
            })
          }
        },
        class: {
          showClass: this.show != 'text',
        },
      }),
    ])

  },


}
</script>

<style>
.showClass {
  display: none;
}
</style>