前端 ElementUI编辑表格单元格与查看模式切换的应用

需求：有时候在填写表单的时候，想要在输入的时候是input输入框的状态，但是当鼠标移出输入框失去焦点时，希望是查看的状态，这种场景可以通过 v-if实现

vue2+ElementUi里面使用如下：

1.el-table标签注册 @cell-click=“editName” :key=“randomKey” 2.在需要编辑的单元格el-table-column 加入template—input输入框

key="one"

cellspacing="0"

border

style="border-collapse: collapse;min-height: 65vh;"

:data="tableData2"

:cell-style="iCellStyle"

:header-cell-style="tableHeaderColor"

:row-class-name="TableRowClassName"

:key="randomKey"

@cell-click="editName"

show-summary

>

data:{

randomKey: Math.random(),

}

methds:{

//编辑单元格事件更新

editName(row, column) {

row[column.property + 'isShow'] = true

// refreshTable是table数据改动时，刷新table的

this.refreshTable()

this.$nextTick(() => {

this.$refs[column.property] && this.$refs[column.property].focus()

})

},

//表格触发事件

alterData(row, column) {

row[column.property + 'isShow'] = false

this.refreshTable()

},

//更新表格

refreshTable() {

this.randomKey = Math.random()

},

}

vue3+ElementPlus 表单编辑与查看模式切换的应用

方法一

实现思路：

具体实现如下：当flag=true时候展示el-input输入框(v-if=“row.flag”) 当flag=false时，展示else部分也就

部分，也就是查看模式的页面

当el-input失去焦点时候绑定一个toLook事件，将flag设置为false，进去查看模式

当div元素点击时触发一个toEdit事件，将flag设置为true，进入编辑模式

html

js

const toLook = (row) => {

row.flag = false

}

const toEdit = (row) => {

row.flag = true

//nextTick:响应式数据发生变化,获取更新的DOM(组件实例)

nextTick(() => {

inputArr.value.focus()

})

}

方法二：

点击编辑，使当前行需要修改的列变为 input 输入框

好文链接