阿里巴巴企业网站怎么做,外贸婚纱网站,那个网站可以做网站测速对比,中国建设会计学网站需求#xff1a;有时候在填写表单的时候#xff0c;想要在输入的时候是input输入框的状态#xff0c;但是当鼠标移出输入框失去焦点时#xff0c;希望是查看的状态#xff0c;这种场景可以通过 v-if实现
vue2ElementUi里面使用如下#xff1a; 1.el-table标签注册 cell-…需求有时候在填写表单的时候想要在输入的时候是input输入框的状态但是当鼠标移出输入框失去焦点时希望是查看的状态这种场景可以通过 v-if实现
vue2ElementUi里面使用如下 1.el-table标签注册 cell-click“editName” :key“randomKey” 2.在需要编辑的单元格el-table-column 加入template—input输入框 el-tablekeyonecellspacing0borderstyleborder-collapse: collapse;min-height: 65vh;:datatableData2:cell-styleiCellStyle:header-cell-styletableHeaderColor:row-class-nameTableRowClassName:keyrandomKeycell-clickeditNameshow-summaryel-table-column propitem2 label晚目标 aligncentertemplate slot-scopescopeel-inputv-ifscope.row[scope.column.property isShow]:refscope.column.propertyv-modelscope.row.item2bluralterData(scope.row, scope.column)/el-inputspan v-else{{ scope.row.item2 }}/span/template/el-table-column/el-tabledata:{
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] falsethis.refreshTable()},//更新表格refreshTable() {this.randomKey Math.random()},}
vue3ElementPlus 表单编辑与查看模式切换的应用
方法一 实现思路
具体实现如下当flagtrue时候展示el-input输入框(v-if“row.flag”) 当flagfalse时展示else部分也就
部分也就是查看模式的页面 当el-input失去焦点时候绑定一个toLook事件将flag设置为false进去查看模式 当div元素点击时触发一个toEdit事件将flag设置为true进入编辑模式 html
el-table-column label属性值名称template #defaultscopeel-inputrefinputArrv-ifscope.row.flagblurtoLook(scope.row)sizesmallplaceholder请你输入属性值名称v-modelscope.row.valueName
/el-inputdiv v-else clicktoEdit(scope.row){{ scope.row.valueName }}/div/template
/el-table-columnjs
const toLook (row) {row.flag false
}const toEdit (row) {row.flag true//nextTick:响应式数据发生变化,获取更新的DOM(组件实例)nextTick(() {inputArr.value.focus()})
}方法二
点击编辑使当前行需要修改的列变为 input 输入框 templatediv classp-10el-table :datatableData borderel-table-column propdate labelDate/el-table-columnel-table-column propname labelName/el-table-columnel-table-column propaddress labelAddress/el-table-columnel-table-column labelValuetemplate #defaultscopespan v-showscope.$index ! editIndex{{ scope.row.value }}/spanel-inputv-showscope.$index editIndexv-modelscope.row.value/el-input/template/el-table-columnel-table-column labelOperatetemplate #default{ row }el-button link clickhandleEdit(row)Edit/el-buttonel-button typeprimary link clickhandleSaveSave/el-buttonel-button typedanger link clickhandleDelete(row)Delete/el-button/template/el-table-column/el-table/div
/templatescript setup langts
import { ref } from vueconst tableData ref([{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,value: 1},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,value: 2},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,value: 3},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,value: 4}
])
const editIndex ref(-1)const handleEdit (row) {editIndex.value tableData.value.indexOf(row)
}const handleSave () {editIndex.value -1console.log(tableData.value)
}const handleDelete (row) {tableData.value.splice(tableData.value.indexOf(row), 1)
}
/script
