实现Element-ui表格点击可以编辑
直接复值代码就可以运行了:有不懂,可评论!
<template>
<div>
<!-- <input type="file" id="people-export" ref="inputer" @change="fileUpload" /> -->
<p style="font-size:26px; text-align: center; padding: 30px;">实现Element-ui表格点击可以编辑</p>
<p style="font-size:20px;">方式1:</p>
<el-table
:data="tableData"
style="width: 100%"
@cell-click="cellClick"
>
<el-table-column label="Date" prop="date"> </el-table-column>
<el-table-column label="Name" prop="name"> </el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
</template>
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
<p style="font-size:20px; margin-top:50px;">方式2:更佳</p>
<el-table
:data="tableData2"
style="width: 100%;"
>
<el-table-column label="Date" prop="date">
<template slot-scope="scope">
<span @click="oneCellClick(scope)">{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column label="Name" prop="name">
<template slot-scope="scope">
<span @click="oneCellClick(scope)">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column align="right">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: "",
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
tableData2: [
{
id: '1',
date: "2016-05-02",
name: "王小虎2",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: '2',
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄",
},
],
search: "",
};
},
methods: {
cellClick(row, column, cell, event) {
// 原文连接 http://www.voidcn.com/article/p-vshxvfex-brn.html
console.error("object:", row, column, cell, event);
// 先清空cell的值
cell.innerHTML = "";
var ipt = document.createElement("input");
ipt.value = row[column.property];
// cell.append(ipt)
console.error(column.property);
ipt.type = "text";
// ipt.value = "这是测试加载的小例子";
ipt.onclick = (e) => {
console.error("输入框被点击了", e);
e.stopPropagation();
e.preventDefault();
return false;
};
// 在绑定光标离开事件
ipt.onblur = (e) => {
console.error("失去光标valu:", e, column.property, e.target.value);
// row[column.property] = e.target.value;
this.$set(row, column.property, e.target.value);
cell.removeChild(ipt);
let one = document.createElement("div");
one.className = ["cell"];
one.innerHTML = e.target.value;
cell.appendChild(one);
// this.$forceUpdate();
console.error("row", this.tableData);
};
cell.appendChild(ipt);
ipt.focus()
},
oneCellClick(scope){
console.error('单元格被点击:',event,event.target.parentNode,scope);
// this.tableData2[0].date='asdfasdf'
var cell = event.target;
var cellFa = event.target.parentNode;
console.error('cell',cell);
var row = scope.row;
var column = scope.column;
// cell.innerHTML = "";
cell.style.display = 'none'
var ipt = document.createElement("input");
ipt.value = row[column.property];
// cell.append(ipt)
console.error(column.property);
ipt.type = "text";
// ipt.value = "这是测试加载的小例子";
ipt.onclick = (e) => {
console.error("输入框被点击了", e);
e.stopPropagation();
e.preventDefault();
return false;
};
// 在绑定光标离开事件
ipt.onblur = (e) => {
console.error("失去光标valu:", e, column.property, e.target.value);
row[column.property] = e.target.value;
cellFa.removeChild(ipt);
cell.style.display = 'block';
console.error("row", this.tableData2);
};
cellFa.appendChild(ipt);
ipt.focus()
},
fileUpload(event) {
// 上传文件
let file = event.target.files;
console.log(event, file);
let formData = new FormData();
formData.append("name", "settingPic");
formData.append("file", file[0]);
console.log(formData);
// 文件上传
this.$axios({
method: "POST",
url: "/api/fileUpload",
data: formData,
})
.then((res) => {
let data = res.data;
if (data.success) {
console.log(data);
} else {
this.$message.error(data.message || "操作失败");
}
this.uploadLoading = false;
})
.catch((e) => {
this.uploadLoading = false;
console.error("error:", e);
});
},
// 原文链接:https://blog.csdn.net/hjhfreshman/article/details/90676072
},
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>