首页 > 其他分享 >el-table可编辑

el-table可编辑

时间：2022-10-24 08:33:21浏览次数：49  
标签：__ el name 编辑 label cell item table row

原文链接：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>

 

标签：__,el,name,编辑,label,cell,item,table,row
From： https://www.cnblogs.com/fswhq/p/16812344.html

相关文章

  • linux ---文本编辑器 vim
    Linuxvim文件编辑操作命令模式中的基本操作操作类型 操作键 功能光标方向移动↑  ↓ ← →上、下、左、右翻页 PageDown或Ctrl+F 向下翻动......
  • 网卡编辑类型
    学习网卡编辑得总结:nmtui,nmcli,nm-connection-editor图形化编辑需要在系统里面显示;(8条消息)nmcli命令详解_桂安俊@kylinOS的博客-CSDN博客_nmcli命令详解 --使用......
  • Shell揭秘——程序退出状态码
    程序退出状态码前言在本篇文章当中主要给大家介绍一个shell的小知识——状态码。这是当我们的程序退出的时候，子进程会将自己程序的退出码传递给父进程，有时候我们可以利用......
  • tvm relay IR 可视化
    本文地址：https://www.cnblogs.com/wanger-sjtu/p/16819877.html发现最近relay的可视化已经在tvm主线上支持了，这里有一个简单的demo代码记录一下需要安装graphviz......
  • 复刻【养了个羊】视频课程，包含关卡编辑和微信小游戏广告
    课程演示​​游戏体验​​​​课程链接​​开发背景​​最近【羊了个羊】小游戏爆火全网，我也紧跟热点，玩了几局，发现第二关死活过不去，甚是恼火。索性自己也开发一款，还做了游戏......
  • Linux - vim编辑和用户数据管理
    基本上 vi/vim 共分为三种模式，分别是命令模式（Command mode），输入模式（Insert mode）和底线命令模式（Last line mode）基础命令：i 切换到输入模式，以输入字符。x 删除当前......
  • 重温Excel基础函数(16)：Column和Columns函数【获取列号和列数】
    1概念COLUMN函数是Excel中一个常用的函数，它可以用来返回参数单元格的列号。COLUMNS函数在Excel中的使用次数较少，它可以用来返回数组或引用的列数。注意这里是列数，不是列号。......
  • 重温Excel基础函数(15)：Concatenate 函数【连接函数，相当于&】
    1概念使用CONCATENATE函数（其中一个文本函数）将两个或多个文本字符串联接为一个字符串。2语法语法：=CONCATENATE(text1, [text2],...)​参数名称说明 ①text1   （必需输入......
  • Linux nano编辑器使用笔记
    新安装的Debian系统，编辑文件的时候发现只有一个自带的nano编辑器，nano编辑器的命令和vi有所不同，做简单笔记。新建/编辑文件nano路径+文件名如果改文件存在，上面的命令将打开......
  • 彻底学会Selenium元素定位
    转载请注明出处❤️作者：测试蔡坨坨原文链接：caituotuo.top/63099961.html你好，我是测试蔡坨坨。最近收到不少初学UI自动化测试的小伙伴私信，对于元素的定位还是有些头疼，总......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99