vue 点击表格单元格可编辑

最新推荐文章于 2024-03-06 11:25:07 发布

原创最新推荐文章于 2024-03-06 11:25:07 发布 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

vue 专栏收录该内容

3 篇文章

订阅专栏

博客涉及Vue相关内容，包含Vue.js、JavaScript以及Element UI等信息技术领域元素。

<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 = ''
},