Vue element table点击单元格可编辑

最新推荐文章于 2024-08-08 09:40:00 发布

章鱼家的俊俊妹妹

最新推荐文章于 2024-08-08 09:40:00 发布

阅读量605

点赞数 1

分类专栏： vue table 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_47268011/article/details/116527460

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

table

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue的el-table组件中实现点击单元格时动态显示输入框并保存用户输入。通过`cell-click`事件和`cell-class-name`属性，结合v-if和v-model，实现实时交互。关键代码展示了表格初始化、输入框处理和行列索引管理的方法。

摘要由CSDN通过智能技术生成

1、

<el-table :data="tableData" @cell-click="cellClick"
			:cell-class-name="getRowColumn">
	<el-table-column prop="note" align="center" label="列1" >
		<template  slot-scope="scope">
			<el-input v-if="scope.row.index==clickCellRowIndex && scope.column.index==clickCellColumnIndex" size="small" v-model="scope.row.note" @blur="inputBlur" 
            				placeholder="请输入">
			</el-input>
			<span v-else>{{scope.row.note}}</span>
		</template>
	</el-table-column>
</el-table>

2、

data(){
	return {
		clickCellRowIndex:null,//用于判断点击是哪行
		clickCellColumnIndex:null,//用于判断点击是哪列
	}
}

3、

methods{
	//输入框 失去焦点
	inputBlur(index,row){
		this.clickCellRowIndex = null
		this.clickCellColumnIndex = null

	},
	//点击cell
	cellClick(row,column,cell,event){
		this.clickCellRowIndex = row.index
		this.clickCellColumnIndex = column.index

	},
	//table初始化的时候给行和列 赋index
	getRowColumn({row,column,rowIndex,columnIndex}){
		row.index = rowIndex
		column.index = columnIndex
	},
}