关于vue.js: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>