博客

element-ui el-table可编辑单元格

目前element不支持可编辑表格，但是提供了一个自由度比较高的slot-scope，基于此写个简单的可编辑表格。

记录一下：

在table中写两种用于切换

	<template slot-scope="scope">
        <span @class="editCell" style="width:120px;" v-show="!showVisiable || (editIndex != scope.$index)" @mouseenter="editCurrRow(scope.$index,'rowkeY')">{{scope.row.keyName}}</span>
        <el-input :id="scope.$index+'rowkeY'" size="mini" style="width:120px;" v-show="showVisiable && (editIndex == scope.$index)" @click="printFinlog" @blur="showVisiable = false" v-model="scope.row.keyName"></el-input>
    </template>

//对span标签监听 也可以使用双击dbclick click等监听事件触发


method：控制切换文本展示和编辑框输入

editCurrRow(rowId,str){
      this.editIndex = rowId;//不加editIndex,整个列都会一块变成可编辑
      this.showVisiable = true;
      let id = rowId+str;
      //也可以用this.$nextTick，个人感觉加个0.01秒的延时比下次渲染灵活一点
      setTimeout(()=>{
        document.getElementById(id).focus();
      },100)
    }       

data :{
	showVisiable:false,//控制显隐
	editIndex:-1 //当前编辑行index
}

.editCell:hover{
	cursor:pointer;
}

结束了