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è)div
VNode,在再其中創(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>