elementui可编辑单元格_element-ui实现单元格可编辑代码分享

本文主要和大家分享element-ui实现单元格可编辑代码，希望能帮助到大家。

如下所示：

:data="tableData"

border

@cell-mouse-enter="handleMouseEnter"

@cell-mouse-leave="handleMouseOut"

style="width: 100%">

label="日期"

width="180">

{{ scope.row.name }}

export default{

data(){

return {

tableData:[

{

name:"test",

editeFlage:false

},

{

name:"test",

editeFlage:false

},

{

name:"test",

editeFlage:false

},

{

name:"test",

editeFlage:false

},

],

inputColumn1:""//第一列的输入框

}

},

methods:{

handleEdit:function(row){

//遍历数组改变editeFlag

},

handleSave:function(row){

//保存数据，向后台取数据

},

handleMouseEnter:function(row, column, cell, event){

cell.children[0].children[1].style.color="black";

},

handleMouseOut:function(row, column, cell, event){

cell.children[0].children[1].style.color="#ffffff";

}

}

}

.cell-edit-input .el-input, .el-input__inner {

width:100px;

}

.cell-icon{

cursor:pointer;

color:#fff;

}

相关推荐：