template
<template>
<div>
<template>
<el-button @click="addClick" style="float: right; margin: -40px 10% 0 0"
>add</el-button
>
<el-table
:data="
tableData.filter(
(data) =>
!search || data.date.toLowerCase().includes(search.toLowerCase())
)
"
style="width: 80%; margin: auto"
border
>
<el-table-column prop="date" label="日期" width="240">
<template slot="header" slot-scope="scope">
日期
<el-input
v-model="search"
class="el_input"
style="display: inline-block; width: 60%"
clearable
size="mini"
placeholder="请输入日期搜索"
/>
{{ scope.row }}
</template>
<template slot-scope="scope">
<span v-if="!scope.row.isShow">{{ scope.row.date }}</span>
<el-input
:id="scope.row.id"
:ref="scope.row.ref"
v-if="scope.row.isShow"
type="text"
style="width: 60%"
v-model="scope.row.date"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<span v-if="!scope.row.isShow">{{ scope.row.name }}</span>
<el-input
v-if="scope.row.isShow"
type="text"
style="width: 60%"
v-model="scope.row.name"
/>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<span v-if="!scope.row.isShow">{{ scope.row.address }}</span>
<el-input
v-if="scope.row.isShow"
type="text"
style="width: 60%"
v-model="scope.row.address"
/>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button @click="editClick(scope.row)" type="text" size="small"
>编辑</el-button
>
<el-button type="text" size="small" @click="saveClick(scope.row)"
>保存</el-button
>
<el-button type="text" size="small" @click="deleteClick(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</template>
</div>
</template>
js部分
<script>
export default {
data() {
return {
search: "",
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
isShow: false,
id: "id0",
ref: "ref0",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
isShow: false,
id: "id1",
ref: "ref1",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
isShow: false,
id: "id2",
ref: "ref2",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
isShow: false,
id: "id3",
ref: "ref3",
},
],
};
},
methods: {
editClick(row) {
this.tableData.forEach((item) => {
this.$set(item, "isShow", false);
if (row.date == item.date) {
this.$set(item, "isShow", true);
}
});
this.$nextTick(() => {
document.querySelector(`#${row.id}`).focus();
});
},
saveClick(row) {
this.tableData.forEach((item) => {
if (row.date == item.date) {
this.$set(item, "isShow", false);
}
});
},
addClick() {
let item = {
date: "",
name: "",
province: "",
city: "",
address: "",
zip: "",
isShow: true,
id: "id" + (this.tableData.length + 1),
ref: "ref" + (this.tableData.length + 1),
};
this.tableData.push(item);
this.$nextTick(() => {
console.log(`#${item.id}`);
document.querySelector(`#${item.id}`).focus();
});
},
deleteClick(row) {
this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableData.forEach((item, index) => {
if (row.date == item.date) {
this.tableData.splice(index, 1);
}
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},
};
</script>