element-ui 单元格可编辑

最新推荐文章于 2024-07-24 10:40:57 发布

hp-future

最新推荐文章于 2024-07-24 10:40:57 发布

阅读量1.1k

点赞数 2

分类专栏： vue+element 编辑表格单元格

本文链接：https://blog.csdn.net/weixin_42497122/article/details/111560828

版权

vue+element 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

编辑表格单元格

1 篇文章 0 订阅

订阅专栏

一、在使用 element-ui 时，一般都会用到表格组件，在使用过程中，有可能会遇到一种需求：双击任意单元格进行编辑

二、我的实现思路是这样：

1、双击后单元格后，单元格能够输入内容

2、获取输入的内容，更新该单元格对应的数据

三、具体实现

1、让单元格更够输入，第一时间肯定想到的是输入框，其实还有一个方法也能实现输入功能，给元素手动设置一个属性，即：

<div contenteditable="true"></div>

contenteditable 属性设置为 true 后，div 就会进入可编辑状态，我们就可以愉快的输入任何内容了

2、div 可以输入了，接下来就是要获取输入的内容了，可以通过事件实现

<el-table-column label="姓名" align="center">
	<template slot-scope="{row, $index}">
		<div style="cursor: pointer;" @dblclick="clickDiv" @blur="divBlur($event, $index, 'name')">{{row.name}}</div>
	</template>
</el-table-column>

自定义表格列的渲染，给 div 绑定两个事件：dblclick、blur

methods: {
	// div双击事件
	clickDiv(e){
		e.target.setAttribute('contenteditable', true)  // 开启 div 的编辑功能
		e.target.style.border = '1px solid #ccc'  // 给 div 设置一个边框
		e.target.focus()  // div 自动获取焦点，方便 blur 的逻辑运行
	},
    // div失去焦点事件
	divBlur(e, index, filed_name){
		e.target.setAttribute('contenteditable', false)  // 取消 div 的可编辑状态
		e.target.style.border = '0 none'  // 去除 div 的边框
		this.tableData[index][filed_name] = e.target.innerText  // 更新修改的单元格的值，filed_name：单元格值对应的字段名，这里应该更新后台中的数据
	},
}

以上步骤即可实现编辑表格的任意单元格

四、具体实现如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" border>
				<el-table-column label="序号" width="200" align="center" type="index"></el-table-column>
				<el-table-column label="姓名" align="center">
					<template slot-scope="{row, $index}">
						<div style="cursor: pointer;" @dblclick="clickDiv" @blur="divBlur($event, $index, 'name')">{{row.name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="年龄" align="center">
					<template slot-scope="{row, $index}">
						<div style="cursor: pointer;" @dblclick="clickDiv" @blur="divBlur($event, $index, 'age')">{{row.age}}</div>
					</template>
				</el-table-column>
				<el-table-column label="性别" align="center">
					<template slot-scope="{row, $index}">
						<div style="cursor: pointer;" @dblclick="clickDiv" @blur="divBlur($event, $index, 'sex')">{{row.sex}}</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript">
			const table_data = [
				{
					id: 1,
					name: '小明',
					age: 18,
					sex: '男'
				},
				{
					id: 2,
					name: '小红',
					age: 17,
					sex: '女'
				},
				{
					id: 3,
					name: '小刚',
					age: 20,
					sex: '男'
				}
			]
			new Vue({
				el: '#app',
				data: {
					tableData: table_data,
				},
				methods:{
					// div双击事件
					clickDiv(e){
						e.target.setAttribute('contenteditable', true)
						e.target.style.border = '1px solid #ccc'
						e.target.focus()
					},
					// div失去焦点事件
					divBlur(e, index, filed_name){
						e.target.setAttribute('contenteditable', false)
						e.target.style.border = '0 none'
						this.tableData[index][filed_name] = e.target.innerText  // 更新修改的单元格的值
						console.log(this.tableData);
					},
				}
			})
		</script>
	</body>
</html>