Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我

电玩女神 2021-07-24 13:05 130阅读 0赞

**目录**

重点：

另外：（input获得焦点的处理）

完整代码如下：

欢迎指正！！！

--------------------

### **重点：** ###

1.给td添加双击事件 @dblclick="edit(k,sub\_k,$event)" ，此函数的作用是将k，sub\_k用下滑线组装起来，并赋值给 editKey。

2.td的两个元素： input元素用v-show="editKey===k+'\_'+sub\_k" （默认是隐藏的）；p元素使用v-show="editKey!==k+'\_'+sub\_k" （默认是显示的）。

3.当dblclick 双击事件执行后，当前点击的td下的input中editKey===k+'\_'+sub\_k为true，input会被推出来显示，

同时p中editKey!==k+'\_'+sub\_k为false，所以p隐藏起来，于是达到编辑的效果。

4.input使用双向绑定 v-model='sub\_item.a'，在修改input内容时，会自动更新到data中，修改后到console打印一下数据就清楚了。

5.input绑定焦点离开事件 @blur="editDis"，触发后将editKey设置为null;于是input中editKey===k+'\_'+sub\_k为false隐藏，同时p中editKey!==k+'\_'+sub\_k为true显示。

### 另外：（input获得焦点的处理） ###

1：首先双击的时候，@dblclick="edit(k,sub\_k,$event)" 需传入$event；

2：在edit函数中 var el = event.currentTarget; 获取当前处理对象（当前的td元素），注意这里event没有处理浏览器兼容的情况，有必要的话自己可以处理一下；

3：使用setTimeout给 input获取焦点，不用setTimeout将无法获取焦点。

setTimeout(function()\{  
                        //设置input获取焦点  
                        el.children\[0\].focus();  
                        //el.children\[0\].select();//选中里面的数据  
                    \},0);

### 完整代码如下： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="GBK">
    		<title></title>
    		<style>
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	margin: 20px;
    	font-family: Arial, "宋体";
    	font-size: 12px;
    	line-height: 20px;
    	color: #333333;
    }
    
    .table {
    	font-size: 13px;
    	word-break: break-all;
    	cursor: default;
    	BORDER: #FFFFFF 1px solid;
    	background-color: #FFFFFF;
    	border-collapse: collapse;
    	border-Color: #E2B801;
    }
    
    .tdprimary {
    	padding: 2px;
    	width: 100px;
    }
    
    .trclock {
    	background-color: #ECF5FF;
    }
    
    .trhover {
    	background-color: #C2C2C2;
    }
    
    .trselected {
    	background-color: #62B0FF
    }
    </style>
    	</head>
    	<body>
    		<div id="app">
    			<table border="1" cellspacing="1" cellpadding="4"
    				bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class="table" >
    				<tr :class="[(k+1)%2==1?'trclock':'']"
    					v-for="(item,k) in list" :key="k">
    				
    					<td class="tdprimary" @dblclick="edit(k,sub_k,$event)" v-for="(sub_item,sub_k) in item" :key="sub_k">
    						<input type='text' v-show="editKey===k+'_'+sub_k" v-model='sub_item.a' @blur="editDis">
    						<p v-show="editKey!==k+'_'+sub_k">{
       {sub_item.a}}</p>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    	<script src="vue.js"></script>
    	<script>
           var vm = new Vue({
                el: '#app',
                data: {
                	editKey:null,
                	list:[
    					[{a:'11'},{a:'12'},{a:'13'},{a:'14'},{a:'15'}],     
    					[{a:'21'},{a:'22'},{a:'23'},{a:'24'},{a:'25'}], 
    					[{a:'31'},{a:'32'},{a:'33'},{a:'34'},{a:'35'}], 
    					[{a:'41'},{a:'42'},{a:'43'},{a:'44'},{a:'45'}], 
    					[{a:'51'},{a:'52'},{a:'53'},{a:'54'},{a:'55'}],
    					[{a:'61'},{a:'62'},{a:'63'},{a:'64'},{a:'65'}]         	
                	]
                },
                methods:{
    			    edit(k,sub_k,event){
    			    	//设置editKey的值，用来控制当前td是展示p还是input，p用来展示数据，input用来编辑数据
    			    	this.editKey=k+'_'+sub_k;
    			    	//获取当前点击对象 
    			    	var el = event.currentTarget;
    			    	//这里要用setTimeout 否则input无法获取焦点，因为要先显示input再获取焦点
    			    	setTimeout(function(){
    			    		//设置input获取焦点
    			    		el.children[0].focus();
    			    		//el.children[0].select();//选中里面的数据
    			    	},0);
    			  
    			    },
    			    editDis(){
    			    	//失去焦点，editKey设置为null让input框隐藏
    			    	this.editKey=null;
    			    }
                }
            });
            
        </script>
    </html>

### 欢迎指正！！！ ###