效果如下:
1.png
2.png
3.png
代码:
<template>
<div class="app-container">
<el-button
type="primary"
icon="el-icon-check"
v-if="saveBoolen"
@click="handleSave"
>保存</el-button
>
<el-table border stripe v-loading="loading" :data="list">
<el-table-column label="名称" prop="name">
<template slot-scope="scope">
<!-- 主要代码 start -->
<div @dblclick="chengenum(scope)">
<el-input
ref="saveTableInput"
v-if="
tableRowIndex == scope.$index &&
tableColumnIndex == scope.column.id
"
v-model="scope.row.name"
@blur="onInputTableBlur"
></el-input>
<span v-else>{{ scope.row.name }}</span>
<!-- 主要代码 end -->
</div>
</template>
</el-table-column>
<el-table-column label="字符" prop="key">
<template slot-scope="scope">
<div @dblclick="chengenum(scope)">
<el-input
ref="saveTableInput"
v-if="
tableRowIndex == scope.$index &&
tableColumnIndex == scope.column.id
"
v-model="scope.row.key"
@blur="onInputTableBlur"
></el-input>
<span v-else>{{ scope.row.key }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getList, save } from "./api";
export default {
data() {
return {
// 表格行
tableRowIndex: undefined,
// 表格列
tableColumnIndex: undefined,
// 保存按钮显现
saveBoolen: false,
loading: true,
list: []
};
},
created() {
this.getList();
},
methods: {
// 双击处理表格input框
chengenum(scope) {
this.saveBoolen = true;
// 找到单个格子独有的属性 - 这里是用所在行跟列id区别显示
this.tableRowIndex = scope.$index;
this.tableColumnIndex = scope.column.id;
// 获取input框焦点 - 为了能进行行列清空操作(不然无法精准定位)
this.$nextTick(() => {
this.$refs.saveTableInput.$refs.input.focus();
});
},
// 取消焦点 选中行列清空
onInputTableBlur() {
this.tableRowIndex = undefined;
this.tableColumnIndex = undefined;
},
// 保存修改的列表
handleSave() {
save(this.list).then(res => {
this.getList();
this.saveBoolen = false;
this.onInputTableBlur();
this.msgSuccess("保存成功");
});
},
// 查询列表
getList() {
this.loading = true;
getList().then(res => {
this.list = res.rows;
this.loading = false;
});
}
}
};
</script>
网友评论