这篇博客详细介绍了如何在Vue项目中实现一个可编辑的表格单元格组件。通过`EditableCell`组件，实现了点击单元格进行编辑，编辑完成后保存值到表格数据的功能。博客内容包括组件的结构设计、样式设置以及事件处理，如`onCellChange`用于处理单元格值的变化，`handleChange`用于更新输入值，`check`和`edit`方法则分别用于确认更改和开始编辑。
页面
export default{
components: {
EditableCell: () => import('@/components/EditableCell/EditableCell.vue'),
},
data() {
return {
tableData:[
{
date:"2020-12-01",
name:"my name is elementui",
address:"浙江省杭州市西湖区",
}
]
}
},
methods: {
onCellChange(val, row) {
// 将编辑之后的值 对应复制给 表格数据
row.address = val;
}
}
}
组件
{{ value || ' ' }}
export default{
props: {
text: String,
},
data() {
return {
value: this.text,
editable: false,
}
},
methods: {
handleChange(e) {
const value = e.target.value;
this.value = value;
},
check() {
this.editable = false;
this.$emit('changeValue', this.value);
},
edit() {
this.editable = true;
}
}
}
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,.editable-cell-text-wrapper {
padding-right: 24px;
height: 28px;
line-height: 28px;
}
.editable-cell-text-wrapper {
/* padding: 5px 24px 5px 5px; */
}
.editable-cell-input-wrapper .editable-input{
float: left;
}
.editable-cell-icon,.editable-cell-icon-check {
position: absolute;
top:0;
bottom:0;
right: 0;
margin:auto;
cursor: pointer;
}
.editable-cell-icon {
width:16px;
height:16px;
line-height: 16px;
text-align: center;
display: none;
}
.editable-cell-icon-check {
width:16px;
height:16px;
line-height: 16px;
text-align: center;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,.editable-cell-icon-check:hover {
color: #108ee9;
}
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
