Vue Render 函數(shù) Table內(nèi)編輯 應(yīng)用
前言
在以前版本中，通過(guò)在table中嵌套span和input的方式，來(lái)實(shí)現(xiàn)這個(gè)功能掏婶，但是在實(shí)際使用過(guò)程中，代碼會(huì)顯得特別的冗長(zhǎng)繁瑣潭陪。這個(gè)時(shí)候雄妥，可以通過(guò)使用render函數(shù)來(lái)解決這個(gè)問(wèn)題最蕾。
思路
思路的話，大概都是一樣的老厌，通過(guò)控制其span瘟则、input的顯隱來(lái)實(shí)現(xiàn)，點(diǎn)擊后更改的作用枝秤。
代碼部分
通過(guò)creatElement創(chuàng)建一個(gè)divVNode,在再其中創(chuàng)建span的和input的VNode醋拧。
createElement('el-input', {}),
createElement('span', {}),
span VNode
domProps插入基礎(chǔ)屬性，再通過(guò)attrs賦值宿百，通過(guò)class來(lái)控制showClass屬性是否生效趁仙。
on中，通過(guò)input方法垦页，將input中的value值傳遞到父級(jí)中雀费，父級(jí)將值賦給當(dāng)前單元格。
blur則是當(dāng)input失去焦點(diǎn)時(shí)痊焊，隱藏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為行數(shù)據(jù)中單元格的數(shù)據(jù)
refreshTable是為了保證每次更新數(shù)據(jù)時(shí)薄啥，單元格能即使刷新
<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>
