el-table可编辑
原文链接:https://blog.csdn.net/hongtoushan/article/details/114130938
表格上绑定的事件函数请参考elementUI官方文档
场景一:整行编辑
鼠标移入单元格的时候,单元格所在行中所有可编辑的单元格全部进入编辑状态。
vue组件
<template>
<div>
<el-table
:data="tableData"
size="mini"
style="width: 100%"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
>
<el-table-column
prop="date"
label="日期"
width="180">
<template slot-scope="scope">
<el-input v-if="scope.row.isEdit" class="item" v-model="scope.row.date" placeholder="请输入内容"></el-input>
<div v-else class="txt">{{scope.row.date}}</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<template slot-scope="scope">
<el-input v-if="scope.row.isEdit" class="item" v-model="scope.row.name" placeholder="请输入内容"></el-input>
<div v-else class="txt">{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Batch',
data () {
return {
// 表格数据
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
isEdit: false
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
isEdit: false
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
isEdit: false
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
isEdit: false
}]
}
},
methods: {
/** 鼠标移入cell */
handleCellEnter (row, column, cell, event) {
row.isEdit = true
},
/** 鼠标移出cell */
handleCellLeave (row, column, cell, event) {
row.isEdit = false
}
}
}
</script>
<style lang='scss'>
.item{
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner{
height: 24px!important;
}
}
.txt{
line-height: 24px;
padding: 0 9px;
box-sizing: border-box;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
演示截图
场景二:当前单元格可编辑
鼠标移入单元格的时候,当前单元格进入编辑状态,本行的其他单元格不受影响。
vue组件
<template>
<div>
<el-table
:data="tableData"
size="mini"
style="width: 600px"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
>
<el-table-column
prop="date"
label="日期"
width="180">
<div class="item" slot-scope="scope">
<el-input class="item__input" v-model="scope.row.date" placeholder="请输入内容"></el-input>
<div class="item__txt">{{scope.row.date}}</div>
</div>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<div class="item" slot-scope="scope">
<el-input class="item__input" v-model="scope.row.name" placeholder="请输入内容"></el-input>
<div class="item__txt">{{scope.row.name}}</div>
</div>
</el-table-column>
<el-table-column
prop="food"
label="食物">
<div class="item" slot-scope="scope">
<el-select class="item__input" v-model="scope.row.food" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="item__txt">{{foodLabel(scope.row.food)}}</div>
</div>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Batch',
data () {
return {
// 下拉选项
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 表格数据
tableData: [{
date: '2016-05-02',
name: '王小虎',
food: '选项5'
}, {
date: '2016-05-04',
name: '王小虎',
food: '选项5'
}, {
date: '2016-05-01',
name: '王小虎',
food: '选项5'
}, {
date: '2016-05-03',
name: '王小虎',
food: '选项5'
}],
// 需要编辑的属性
editProp: ['date', 'name', 'food']
}
},
computed: {
foodLabel () {
return (val) => {
return this.options.find(o => o.value === val).label
}
}
},
methods: {
/** 鼠标移入cell */
handleCellEnter (row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
cell.querySelector('.item__input').style.display = 'block'
cell.querySelector('.item__txt').style.display = 'none'
}
},
/** 鼠标移出cell */
handleCellLeave (row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
cell.querySelector('.item__input').style.display = 'none'
cell.querySelector('.item__txt').style.display = 'block'
}
}
}
}
</script>
<style lang='scss'>
.item{
.item__input{
display: none;
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner{
height: 24px!important;
}
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__suffix{
i{
font-size: 12px !important;
line-height: 26px !important;
}
}
}
.item__txt{
box-sizing: border-box;
line-height: 24px;
padding: 0 9px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
演示截图
场景三:点击进入编辑
鼠标移入当前单元格,显示可以编辑的样式,单击进入编辑状态,编辑完成点击保存,本行编辑状态消失。适用于单行数据保存。
vue组件
<template>
<div>
<el-table
:data="tableData"
size="mini"
style="width: 600px"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
@cell-click="handleCellClick"
>
<el-table-column
prop="date"
label="日期"
width="180">
<div class="item" slot-scope="scope">
<el-input class="item__input" v-model="scope.row.date" placeholder="请输入内容"></el-input>
<div class="item__txt">{{scope.row.date}}</div>
</div>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<div class="item" slot-scope="scope">
<el-input class="item__input" v-model="scope.row.name" placeholder="请输入内容"></el-input>
<div class="item__txt">{{scope.row.name}}</div>
</div>
</el-table-column>
<el-table-column
prop="food"
label="食物">
<div class="item" slot-scope="scope">
<el-select class="item__input" v-model="scope.row.food" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="item__txt">{{foodLabel(scope.row.food)}}</div>
</div>
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="save(scope.row)" type="text" size="small">保存</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Batch',
data () {
return {
// 下拉选项
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 表格数据
tableData: [{
id: 0,
date: '2016-05-02',
name: '王小虎',
food: '选项5'
}, {
id: 1,
date: '2016-05-04',
name: '王小虎',
food: '选项5'
}, {
id: 2,
date: '2016-05-01',
name: '王小虎',
food: '选项5'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
food: '选项5'
}],
// 需要编辑的属性
editProp: ['date', 'name', 'food'],
// 保存进入编辑的cell
clickCellMap: {}
}
},
computed: {
foodLabel () {
return (val) => {
return this.options.find(o => o.value === val).label
}
}
},
methods: {
/** 鼠标移入cell */
handleCellEnter (row, column, cell, event) {
const property = column.property
if (property === 'date' || property === 'name' || property === 'food') {
cell.querySelector('.item__txt').classList.add('item__txt--hover')
}
},
/** 鼠标移出cell */
handleCellLeave (row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
}
},
/** 点击cell */
handleCellClick (row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
// 保存cell
this.saveCellClick(row, cell)
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'block'
cell.querySelector('input').focus()
}
},
/** 取消编辑状态 */
cancelEditable (cell) {
cell.querySelector('.item__txt').style.display = 'block'
cell.querySelector('.item__input').style.display = 'none'
},
/** 保存进入编辑的cell */
saveCellClick (row, cell) {
const id = row.id
if (this.clickCellMap[id] !== undefined) {
if (!this.clickCellMap[id].includes(cell)) {
this.clickCellMap[id].push(cell)
}
} else {
this.clickCellMap[id] = [cell]
}
},
/** 保存数据 */
save (row) {
const id = row.id
// 取消本行所有cell的编辑状态
this.clickCellMap[id].forEach(cell => {
this.cancelEditable(cell)
})
this.clickCellMap[id] = []
}
}
}
</script>
<style lang='scss'>
.item{
.item__input{
display: none;
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner{
height: 24px!important;
}
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__suffix{
i{
font-size: 12px !important;
line-height: 26px !important;
}
}
}
.item__txt{
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
}
.item__txt--hover{
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
}
</style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤