vue 点击表格单元格可编辑

最新推荐文章于 2024-05-07 01:45:01 发布

普普通通程序媛

最新推荐文章于 2024-05-07 01:45:01 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_45960892/article/details/127515574

版权

vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<el-table :data="tableList" @cell-click='getCell' :cell-class-name='getRowColumn'>

<el-table-column
  prop="remark"
  label="备注"
  width="370">
  <template slot-scope='scope'>
    <el-input v-model='scope.row.remark' v-if='scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex' @blur='inputBlur'></el-input>
    <div v-else> {{scope.row.remark}}</div>
  </template>
</el-table-column>

</el-table>

getCell (row, column, cell, event) {
  this.tabRowIndex = row.index
  this.tabColumnIndex = column.index
},
getRowColumn ({ row, column, rowIndex, columnIndex }) {
  row.index = rowIndex
  column.index = columnIndex
},
inputBlur () {
  this.tabRowIndex = null
  this.tabColumnIndex = ''
},