实现表格双击后变输入框
双击后效果,本次需求我的代码中始终只会保持一个输入框 每次都会执行stopEditing 函数
还有一种实现方式就是在tableData2中的每一个对象中加一个布尔值,然后失焦、聚焦的时候 直接修改这个值显示
<!-- 编辑测量数据弹框 -->
<Dialog title="编辑测量数据" width="1200px" :visible.sync="editMeasureShow" append-to-body v-dialogDrag>
<el-table
:data="tableData2"
class="tableData2_class"
border
stripe
:header-cell-style="{
background: '#f1f3f5',
color: '#000000'
}"
>
<el-table-column align="center" prop="weight" label="重量(KG)">
<template v-slot="{ row }">
<div
style="width: 100%; cursor: pointer"
@dblclick="startEditing(row, 'weight')"
v-if="!row.isEditingWeight"
>
{{ row.weight || '--' }}
</div>
<el-input
v-else
ref="weightInput"
v-model="row.weight"
@blur="stopEditing(row, 'weight')"
@keyup.enter="stopEditing(row, 'weight')"
type="number"
size="mini"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="length" label="长(CM)">
<template v-slot="{ row }">
<div
style="width: 100%; cursor: pointer"
@dblclick="startEditing(row, 'length')"
v-if="!row.isEditingLength"
>
{{ row.length || '--' }}
</div>
<el-input
v-else
ref="lengthInput"
v-model="row.length"
@blur="stopEditing(row, 'length')"
@keyup.enter="stopEditing(row, 'length')"
type="number"
size="mini"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="width" label="宽(CM)">
<template v-slot="{ row }">
<div style="width: 100%; cursor: pointer" @dblclick="startEditing(row, 'width')" v-if="!row.isEditingWidth">
{{ row.width || '--' }}
</div>
<el-input
v-else
ref="widthInput"
v-model="row.width"
@blur="stopEditing(row, 'width')"
@keyup.enter="stopEditing(row, 'width')"
type="number"
size="mini"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="height" label="高(CM)">
<template v-slot="{ row }">
<div
style="width: 100%; cursor: pointer"
@dblclick="startEditing(row, 'height')"
v-if="!row.isEditingHeight"
>
{{ row.height || '--' }}
</div>
<el-input
v-else
ref="heightInput"
v-model="row.height"
@blur="stopEditing(row, 'height')"
@keyup.enter="stopEditing(row, 'height')"
type="number"
size="mini"
></el-input>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="editMeasureShow = false">取消</el-button>
<el-button type="primary" @click="editMeasureDataSubmit">确认</el-button>
</span>
</Dialog>
methods: {
stopEditing (row, field) {
// 假设 传递 weight
// field.charAt(0).toUpperCase() + field.slice(1)
// 这个位置组成 field.charAt(0).toUpperCase() // W
// 这个位置组成 field.slice(1) // eight
// 我是为了规范驼峰 对应这里的控制 v-if="!row.isEditingWeight"
// 不想的话直接这样 `isEditing${field}` 对应的if 也得改
this.$set(row, `isEditing${field.charAt(0).toUpperCase() + field.slice(1)}`, false)
},
startEditing (row, field) {
this.$set(row, `isEditing${field.charAt(0).toUpperCase() + field.slice(1)}`, true)
this.$nextTick(() => {
const input = this.$refs[`${field}Input`]
if (input) {
input.focus()
// input.select() // 全选 输入框中的内容 按需开启
}
})
},
editMeasureDataSubmit(){
// to do something
}
}
// 样式也加一下 增大区域
.tableData2_class {
width: 100%;
margin-top: 20px;
::v-deep .el-table__row {
height: 54px;
}
}
原文地址:https://blog.csdn.net/weixin_45776545/article/details/144370027
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!