Vue element table点击单元格可编辑
程序员文章站
2022-06-08 14:59:05
...
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
},
}
推荐阅读
-
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
-
vue+Element中table表格实现可编辑(select下拉框)
-
vue封装element组件库中的封装通用table,是否启用多选、按钮及是否分页,样式可自定义设置
-
element-ui直接在表格中点击单元格编辑
-
element-ui表格组件点击某一单元格,该单元格显示文本框可编辑本单元格数据
-
vue+elementui怎样点击table中的单元格触发事件--弹框
-
Vue-Element-table 动态合并单元格
-
element table表格点击单元格实现编辑
-
vue element ui Table 动态 相邻 合并单元格
-
element-ui table 单元格可编辑